From cf5b95ec040f51731129d5985525d009a8ebf4da Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Mon, 10 Aug 2026 08:43:14 +0800
Subject: [PATCH] fix(music): increase search result density

---
 src/pages/__tests__/music.spec.ts | 7 +++++++
 src/pages/music.vue               | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/pages/__tests__/music.spec.ts b/src/pages/__tests__/music.spec.ts
index a337a287..bfcd7566 100644
--- a/src/pages/__tests__/music.spec.ts
+++ b/src/pages/__tests__/music.spec.ts
@@ -137,6 +137,13 @@ describe('music page', () => {
     expect(screen.getByText('Album')).toBeInTheDocument()
   })
 
+  it('uses three columns from the desktop breakpoint', async () => {
+    const { container } = await renderMusicPage()
+
+    const resultColumn = await waitFor(() => container.querySelector('.music-result-col'))
+    expect(resultColumn).toHaveClass('v-col-md-6', 'v-col-lg-4')
+  })
+
   it('uses the shared themed lift interaction for result cards', async () => {
     const { container } = await renderMusicPage()
     const hoverArea = await waitFor(() => container.querySelector('.music-card-hover-area'))
diff --git a/src/pages/music.vue b/src/pages/music.vue
index 7fbfe28b..998b309e 100644
--- a/src/pages/music.vue
+++ b/src/pages/music.vue
@@ -44,7 +44,7 @@ watch(query, searchMusic, { immediate: true })
 
     <LoadingBanner v-if="loading" class="mt-12" />
     <VRow v-else-if="results.length" class="music-results">
-      <VCol v-for="item in results" :key="getMusicKey(item)" cols="12" md="6" xl="4" class="music-result-col">
+      <VCol v-for="item in results" :key="getMusicKey(item)" cols="12" md="6" lg="4" class="music-result-col">
         <MusicCard :music="item" />
       </VCol>
     </VRow>