From 485701ebe0b7a8a78b5d074939eb851b15c2f348 Mon Sep 17 00:00:00 2001
From: GulSam00 <gulsamcono@gmail.com>
Date: Fri, 14 Aug 2026 12:40:20 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix=20:=20=EC=9D=B8=EA=B8=B0=EC=B0=A8?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B3=A1=20=EC=B9=B4=EB=93=9C=20=EB=B2=88=ED=98=B8?=
 =?UTF-8?q?=20=EC=98=81=EC=97=AD=20=EB=B0=80=EB=A6=BC=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=20=EB=B0=8F=20=EC=A2=8C=EC=9A=B0=20=EC=97=AC=EB=B0=B1=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20(#304)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017FgvRV4vpiVcD3y2cep4Tn
---
 apps/web/src/app/popular/ChartRankingList.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/popular/ChartRankingList.tsx b/apps/web/src/app/popular/ChartRankingList.tsx
index f7e9fe6..6ae350e 100644
--- a/apps/web/src/app/popular/ChartRankingList.tsx
+++ b/apps/web/src/app/popular/ChartRankingList.tsx
@@ -152,7 +152,10 @@ export default function ChartRankingList() {
             </div>
           ) : (
             items.map(item => (
-              <div key={item.id} className={cn('flex gap-4 border-b py-3 last:border-0')}>
+              <div
+                key={item.id}
+                className="flex items-start gap-4 border-b px-4 py-3 last:border-0"
+              >
                 <div
                   className={cn(
                     'flex h-8 w-8 shrink-0 items-center justify-center rounded-full',
@@ -161,7 +164,8 @@ export default function ChartRankingList() {
                 >
                   {item.rank}
                 </div>
-                <SongSummary song={item} />
+                {/* 순위 뱃지와 같은 행이라 min-w-0이 없으면 긴 곡 제목·가수가 번호 영역을 밀어낸다 */}
+                <SongSummary song={item} className="min-w-0 flex-1" />
               </div>
             ))
           )}

From f5c049f5b6d6ed3f95a5f872e9d4610c55783879 Mon Sep 17 00:00:00 2001
From: GulSam00 <gulsamcono@gmail.com>
Date: Fri, 14 Aug 2026 12:40:20 +0900
Subject: [PATCH 2/2] =?UTF-8?q?refactor=20:=20=EC=B5=9C=EC=8B=A0=EA=B3=A1?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B3=B8=EB=AC=B8=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20ScrollArea=EB=A1=9C=20=ED=86=B5=EC=9D=BC?=
 =?UTF-8?q?=20(#304)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017FgvRV4vpiVcD3y2cep4Tn
---
 apps/web/src/app/recent/page.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/recent/page.tsx b/apps/web/src/app/recent/page.tsx
index c132cb0..bcf44b5 100644
--- a/apps/web/src/app/recent/page.tsx
+++ b/apps/web/src/app/recent/page.tsx
@@ -6,6 +6,7 @@ import { useState } from 'react';
 import CharacterMessage from '@/components/CharacterMessage';
 import StaticLoading from '@/components/StaticLoading';
 import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
 import {
   Select,
   SelectContent,
@@ -87,11 +88,11 @@ export default function RecentSongPage() {
       </div>
 
       {recentAddSongs && recentAddSongs.length > 0 ? (
-        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+        <ScrollArea className="min-h-0 flex-1">
           {recentAddSongs.map(song => (
             <RecentSongCard key={song.id} song={song} />
           ))}
-        </div>
+        </ScrollArea>
       ) : (
         <CharacterMessage
           variant="curious"