From 2825373c3cf1f39a199cfdedd207b032a1af9af0 Mon Sep 17 00:00:00 2001
From: Caleb Allen <caleballen1276@gmail.com>
Date: Mon, 30 Mar 2026 04:03:51 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20add=20height:100%=20to=20all=20views=20m?=
 =?UTF-8?q?issing=20it=20=E2=80=94=20eliminates=20top=20gap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Views with contain:layout in shadow DOM need explicit height:100%
on :host so their internal flex layout fills the parent's flex
space. Without it, the component doesn't know its height and the
internal content doesn't stretch to fill the panel.

Added height:100% to: cover-grid, artists-view, genres-view,
playlist-view, track-list, config-page (also box-sizing).
explore-view and detail views already had it.
---
 frontend/src/components/artists-view/artists-view.ts    | 1 +
 frontend/src/components/config-page/config-page.ts      | 2 ++
 frontend/src/components/cover-grid/cover-grid-styles.ts | 1 +
 frontend/src/components/genres-view/genres-view.ts      | 1 +
 frontend/src/components/playlist-view/playlist-view.ts  | 1 +
 frontend/src/components/track-list/track-list.ts        | 1 +
 6 files changed, 7 insertions(+)

diff --git a/frontend/src/components/artists-view/artists-view.ts b/frontend/src/components/artists-view/artists-view.ts
index ebf03fd..cacbb92 100644
--- a/frontend/src/components/artists-view/artists-view.ts
+++ b/frontend/src/components/artists-view/artists-view.ts
@@ -224,6 +224,7 @@ export class ArtistsView
                 display: flex;
                 flex-direction: column;
                 overflow: hidden;
+                height: 100%;
                 position: relative;
                 contain: layout style;
             }
diff --git a/frontend/src/components/config-page/config-page.ts b/frontend/src/components/config-page/config-page.ts
index 3d0ee1f..759a17e 100644
--- a/frontend/src/components/config-page/config-page.ts
+++ b/frontend/src/components/config-page/config-page.ts
@@ -386,6 +386,8 @@ export class ConfigPage extends LitElement {
         :host {
             display: block;
             padding: 1.5em;
+            height: 100%;
+            box-sizing: border-box;
             color: var(--yj-text-primary, #fff);
             font-family: system-ui, -apple-system, sans-serif;
             overflow-y: auto;
diff --git a/frontend/src/components/cover-grid/cover-grid-styles.ts b/frontend/src/components/cover-grid/cover-grid-styles.ts
index 7b7ded7..8f2c329 100644
--- a/frontend/src/components/cover-grid/cover-grid-styles.ts
+++ b/frontend/src/components/cover-grid/cover-grid-styles.ts
@@ -8,6 +8,7 @@ const gridStyles = css`
         display: flex;
         flex-direction: column;
         overflow: hidden;
+        height: 100%;
         position: relative;
         contain: layout style;
     }
diff --git a/frontend/src/components/genres-view/genres-view.ts b/frontend/src/components/genres-view/genres-view.ts
index 3ccf574..c72976f 100644
--- a/frontend/src/components/genres-view/genres-view.ts
+++ b/frontend/src/components/genres-view/genres-view.ts
@@ -229,6 +229,7 @@ export class GenresView
             display: flex;
             flex-direction: column;
             overflow: hidden;
+            height: 100%;
             position: relative;
             contain: layout style;
         }
diff --git a/frontend/src/components/playlist-view/playlist-view.ts b/frontend/src/components/playlist-view/playlist-view.ts
index 95d9526..ac101a7 100644
--- a/frontend/src/components/playlist-view/playlist-view.ts
+++ b/frontend/src/components/playlist-view/playlist-view.ts
@@ -176,6 +176,7 @@ export class PlaylistView extends LitElement {
             display: flex;
             flex-direction: column;
             overflow: hidden;
+            height: 100%;
             position: relative;
             contain: layout style;
         }
diff --git a/frontend/src/components/track-list/track-list.ts b/frontend/src/components/track-list/track-list.ts
index ad401c8..f6c82ee 100644
--- a/frontend/src/components/track-list/track-list.ts
+++ b/frontend/src/components/track-list/track-list.ts
@@ -747,6 +747,7 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
       display: flex;
       flex-direction: column;
       overflow: hidden;
+      height: 100%;
       contain: layout style;
     }