From d6133da9bff47ee5398c925f9a56c726a62ed40a Mon Sep 17 00:00:00 2001 From: 4gray Date: Sat, 1 Aug 2026 17:44:19 +0200 Subject: [PATCH] =?UTF-8?q?fix(ui):=20address=20review=20=E2=80=94=20setti?= =?UTF-8?q?ngs=20nav=20on=20landscape,=20poster=20dead=20space?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two more findings from the Codex review. The stacked settings context panel capped itself at 30vh, which on a 360px screen is 108px — less than the panel's own title and footer, so the seven section rows collapsed to nothing behind an overlapping footer. On short screens the caption gives way (the rail already labels the page), the footer sheds its tall-screen padding, and the settings variant gets a slightly larger cap: unlike the live routes there is no player below competing for height, only a scrollable form. The poster kept a 330px minimum from the skeleton fallback at the bottom of the file — sized for the 220px desktop poster — while the stacked phone hero renders it 140px wide with a ~210px aspect-ratio height. Every loaded detail page carried ~120px of empty space between the poster and the title. The override sits after that rule because it wins on source order, not specificity. Co-Authored-By: Claude Fable 5 --- .../content-hero/content-hero.component.scss | 11 +++++++++++ ...pace-settings-context-panel.component.scss | 19 +++++++++++++++++++ ...space-shell-context-sidebar.component.scss | 10 ++++++++++ 3 files changed, 40 insertions(+) diff --git a/libs/ui/components/src/lib/content-hero/content-hero.component.scss b/libs/ui/components/src/lib/content-hero/content-hero.component.scss index f5f9fb47c..974ab448c 100644 --- a/libs/ui/components/src/lib/content-hero/content-hero.component.scss +++ b/libs/ui/components/src/lib/content-hero/content-hero.component.scss @@ -599,3 +599,14 @@ ngx-skeleton-loader { min-height: 330px; // Fallback aspect-ratio: 2 / 3; } + +// After the rule above so it wins the cascade at equal specificity: that +// 330px skeleton fallback is sized for the desktop poster width, while the +// stacked phone hero renders the poster 140px wide — its aspect-ratio height +// is ~210px, and the leftover minimum was pure empty space pushing the title +// and actions ~120px down on every loaded detail page. +@media (max-width: 640px) { + .poster { + min-height: 0; + } +} diff --git a/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-settings-context-panel.component.scss b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-settings-context-panel.component.scss index 77328d32b..c439cb7e2 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-settings-context-panel.component.scss +++ b/libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-settings-context-panel.component.scss @@ -49,3 +49,22 @@ .settings-back-button:hover:not(.active):not(.selected) { background: var(--app-selection-surface); } + +// On a landscape phone the stacked panel gets ~108-148px, and this panel's +// fixed chrome (title + footer) alone is about that tall — the section list +// was collapsing to nothing behind an overlapping footer. The rail already +// labels the page, so the caption is what gives way, and the footer sheds +// the padding it carries for taller screens. +@media (max-width: 640px) and (max-height: 599px) { + .panel-title { + display: none; + } + + .settings-panel-body { + padding-top: 8px; + } + + .settings-panel-footer { + padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); + } +} diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss index 10dc9362b..a5e05bd9f 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss +++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss @@ -101,3 +101,13 @@ overflow: hidden; } } + +// The settings route has no player competing for height — its content is one +// scrollable form — so on a short landscape phone the panel can take a larger +// share. 30vh of a 360px screen is 108px, which the panel's own footer and +// padding consume before a single section row renders. +@media (max-width: 640px) and (max-height: 599px) { + .context-panel--settings { + max-height: max(30vh, 148px); + } +}