fix: add height:100% to all views missing it — eliminates top gap

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.
This commit is contained in:
2026-03-30 04:03:51 -04:00
parent c7b859507d
commit 2825373c3c
6 changed files with 7 additions and 0 deletions
@@ -224,6 +224,7 @@ export class ArtistsView
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
position: relative;
contain: layout style;
}
@@ -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;
@@ -8,6 +8,7 @@ const gridStyles = css`
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
position: relative;
contain: layout style;
}
@@ -229,6 +229,7 @@ export class GenresView
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
position: relative;
contain: layout style;
}
@@ -176,6 +176,7 @@ export class PlaylistView extends LitElement {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
position: relative;
contain: layout style;
}
@@ -747,6 +747,7 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
contain: layout style;
}