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

+3
View File
@@ -97,14 +97,17 @@
<style>
.track-row {
width: 100%;
height: 56px;
padding: 0 16px;
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
border-radius: 8px;
cursor: pointer;
transition: background-color 150ms ease;
box-sizing: border-box;
}
.track-row.hovered {
@@ -319,14 +319,18 @@
}
.table-header {
width: 100%;
height: 40px;
padding: 0 16px;
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
font-size: 12px;
text-transform: uppercase;
color: #666666;
font-weight: 400;
box-sizing: border-box;
}
.col-number {
@@ -335,6 +339,7 @@
.col-title {
flex: 1;
min-width: 0;
}
.col-duration {
@@ -346,4 +351,16 @@
width: 80px;
text-align: right;
}
.track-list {
display: flex;
flex-direction: column;
width: 100%;
}
.tracks {
display: flex;
flex-direction: column;
width: 100%;
}
</style>
+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">