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