fix(music): increase search result density

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'))

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>