fix: track list layout and HomeView content rendering

- Add explicit flex-direction: row and width: 100% to TrackRow
- Add missing .track-list and .tracks container styles in AlbumDetailView
- Add gap: 16px to table header to match TrackRow alignment
- Add box-sizing: border-box for consistent sizing
This commit is contained in:
vicrodh committed 2026-01-09 15:11:07 -06:00
1 parent 12a53a63d1
commit ffadf70c8b
3 files changed
+70 -50

No files matched your search

+50 -50
View File
@@ -53,58 +53,58 @@
<!-- Recently Played -->
{#if recentAlbums.length > 0}
<HorizontalScrollRow title="Escuchado recientemente">
{#snippet children()}
{#each recentAlbums as album}
<AlbumCard
artwork={album.artwork}
title={album.title}
artist={album.artist}
quality={album.quality}
onclick={() => onAlbumClick?.(album.id ?? '')}
/>
{/each}
<div class="spacer"></div>
{/snippet}
</HorizontalScrollRow>
{/if}
<HorizontalScrollRow title="Escuchado recientemente">
{#snippet children()}
{#each recentAlbums as album}
<AlbumCard
artwork={album.artwork}
title={album.title}
artist={album.artist}
quality={album.quality}
onclick={() => onAlbumClick?.(album.id ?? '')}
/>
{/each}
<div class="spacer"></div>
{/snippet}
</HorizontalScrollRow>
{/if}
<!-- Recommended For You -->
{#if recommendedAlbums.length > 0}
<HorizontalScrollRow title="Recomendado para ti">
{#snippet children()}
{#each recommendedAlbums as album}
<AlbumCard
artwork={album.artwork}
title={album.title}
artist={album.artist}
quality={album.quality}
size="large"
onclick={() => onAlbumClick?.(album.id ?? '')}
/>
{/each}
<div class="spacer"></div>
{/snippet}
</HorizontalScrollRow>
{/if}
<!-- Recommended For You -->
{#if recommendedAlbums.length > 0}
<HorizontalScrollRow title="Recomendado para ti">
{#snippet children()}
{#each recommendedAlbums as album}
<AlbumCard
artwork={album.artwork}
title={album.title}
artist={album.artist}
quality={album.quality}
size="large"
onclick={() => onAlbumClick?.(album.id ?? '')}
/>
{/each}
<div class="spacer"></div>
{/snippet}
</HorizontalScrollRow>
{/if}
<!-- New Releases -->
{#if newReleases.length > 0}
<HorizontalScrollRow title="Nuevos lanzamientos">
{#snippet children()}
{#each newReleases as album}
<AlbumCard
artwork={album.artwork}
title={album.title}
artist={album.artist}
quality={album.quality}
onclick={() => onAlbumClick?.(album.id ?? '')}
/>
{/each}
<div class="spacer"></div>
{/snippet}
</HorizontalScrollRow>
{/if}
<!-- New Releases -->
{#if newReleases.length > 0}
<HorizontalScrollRow title="Nuevos lanzamientos">
{#snippet children()}
{#each newReleases as album}
<AlbumCard
artwork={album.artwork}
title={album.title}
artist={album.artist}
quality={album.quality}
onclick={() => onAlbumClick?.(album.id ?? '')}
/>
{/each}
<div class="spacer"></div>
{/snippet}
</HorizontalScrollRow>
{/if}
{:else}
<!-- Welcome/Empty State -->
<div class="welcome-state">