From ffadf70c8be6325ebd94c1900a5ced18fb409532 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Fri, 9 Jan 2026 15:11:07 -0600
Subject: [PATCH] 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
---
 src/lib/components/TrackRow.svelte            |   3 +
 .../components/views/AlbumDetailView.svelte   |  17 +++
 src/lib/components/views/HomeView.svelte      | 100 +++++++++---------
 3 files changed, 70 insertions(+), 50 deletions(-)

diff --git a/src/lib/components/TrackRow.svelte b/src/lib/components/TrackRow.svelte
index a3c425251..760d0119c 100644
--- a/src/lib/components/TrackRow.svelte
+++ b/src/lib/components/TrackRow.svelte
@@ -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 {
diff --git a/src/lib/components/views/AlbumDetailView.svelte b/src/lib/components/views/AlbumDetailView.svelte
index ce81f7e51..21af6756e 100644
--- a/src/lib/components/views/AlbumDetailView.svelte
+++ b/src/lib/components/views/AlbumDetailView.svelte
@@ -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>
diff --git a/src/lib/components/views/HomeView.svelte b/src/lib/components/views/HomeView.svelte
index e88a3ffae..f1b2a6b2f 100644
--- a/src/lib/components/views/HomeView.svelte
+++ b/src/lib/components/views/HomeView.svelte
@@ -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">