fix(ui): address review — settings nav on landscape, poster dead space

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 <noreply@anthropic.com>

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;
+    }
+}

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));
+    }
+}

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);
+    }
+}