fix(ui): make the workspace usable on phone-sized screens

The shell was half-adapted below 640px: the rail flipped to a horizontal
bar but the link lists inside it kept stacking downwards, so the navigation
was drawn outside the bar and over the header (#1100).

Three resizable rails — the shell context panel, the live-layout channel
sidebar and the M3U channel drawer — kept their persisted desktop width,
which left the content around 50px on a 375px screen. They now span the
full width and stack above the content. The inline width written by
ResizableDirective is why these rules need `!important`.

Found while walking the rest of the UI at 375px and 768px:

- The detail hero kept poster and details side by side, squeezing the
  action row below its own labels until "Play" was clipped to its icon.
- The settings section list did not scroll and painted over the footer,
  which also affected short desktop windows.
- Hiding the M3U channel list on a phone was one-way: the restore handle
  was hidden and only Cmd/Ctrl+B could bring it back.
- The live header drew the channel count and the paginator on top of each
  other up to tablet width, because the paginator does not shrink and the
  meta collapsed to zero width and overflowed its box.
- The search scope checkbox was pushed off the right edge.

Live TV states a floor for the player instead of a ceiling for the lists,
so the video keeps a usable share of the screen under the categories panel
and the channel list.

Closes #1100

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

.changes/ui-mobile-layout.md

@@ -0,0 +1,10 @@
+---
+type: fix
+area: ui
+issues: [1100]
+---
+
+IPTVnator is usable on a phone again. The navigation bar no longer sits off
+screen, category and channel lists take the full width instead of squeezing
+the content into a sliver, the video keeps a usable share of the screen, and
+the M3U channel list can be reopened after hiding it.

apps/web/src/app/settings/settings.component.scss

@@ -751,6 +751,9 @@
     );
     margin-left: 0;
     margin-right: 0;
+    // Stretched to the full layout width, so its own inline padding would be
+    // added on top and push the settings page into a horizontal scroll.
+    box-sizing: border-box;
     z-index: 100;
     display: flex;
     justify-content: flex-end;

docs/architecture/iptvnator-ui-guidelines.md

@@ -253,9 +253,11 @@ remain local when the meaning is explicit.
   width is preserved so uncollapsing restores the user's previous resized
   width. Both rails share the same 180 ms width transition so motion stays in
   lockstep.
-- Below 600 px viewport, the M3U layout's mobile bottom-drawer rule overrides
-  the desktop collapse to `height: 0` instead of `width: 0`, and the floating
-  restore handle is hidden.
+- At the phone breakpoint the M3U layout's bottom-drawer rule overrides the
+  desktop collapse to `height: 0` instead of `width: 0`. The floating restore
+  handle stays visible there: the collapse toggle is reachable by touch, so
+  hiding the handle left a phone with no way to bring the list back short of
+  `Cmd/Ctrl+B`.
 
 ### EPG Card
 
@@ -331,6 +333,50 @@ Settings use the same system but are flatter than content-heavy views.
 - Neutral rows can use low-opacity dark overlays
 - Keep strong blue tint reserved for active sections and selected items
 
+## Phone Layout
+
+`640px` is the phone breakpoint. Use `@media (max-width: 640px)` rather than
+inventing a nearby value: several surfaces cooperate at this width, and a
+component that picks `599px` leaves a band where the shell has already stacked
+but the component has not.
+
+### Rails become rows or stacks
+
+- The workspace shell rail turns into a horizontal top bar. Everything inside
+  it has to opt into the row direction — a nested list that keeps
+  `flex-direction: column` stacks its links out of the bar and over the header.
+  The bar scrolls sideways once a portal contributes its sections, and the
+  settings link is `position: sticky` so it never scrolls out of reach.
+- Side rails stack above the content instead of beside it: the shell context
+  panel, the live-layout channel sidebar, and the M3U channel drawer.
+
+### Resizable rails need `!important`
+
+`ResizableDirective` writes the persisted desktop width as an inline style, so
+a phone rule must be `width: 100% !important` to win. Hide `.resize-handle` in
+the same rule — dragging is meaningless at full width. Since there is no global
+`border-box` reset, a full-width rail with its own padding also needs
+`box-sizing: border-box` or it overflows the viewport.
+
+### State the content's floor, not the list's ceiling
+
+On routes that stack two lists above the player (live TV shows the categories
+panel and the channel list), capping both lists still leaves the video a
+sliver. Give the player container a `min-height` instead and let the lists
+shrink into what is left.
+
+### What to drop
+
+Prefer removing a control over shrinking everything around it:
+
+- Keyboard-only affordances — the `⌘K` badge, the shortcuts button.
+- The `mat-paginator` page-size select, which is the widest part of the
+  control and the least useful one on a phone. The range and arrows stay.
+- Counts and subtitles that a neighbouring control already states.
+
+Never drop the only way back to a hidden surface. A collapse toggle that is
+reachable by touch needs its restore affordance to be reachable too.
+
 ## Theme Guidance
 
 ### Light Theme

libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss

@@ -109,18 +109,25 @@
     }
 }
 
-@media only screen and (max-width: 599px) {
+// Matches the phone breakpoint in portal-layout's live-layout mixin, which
+// this component includes; a narrower one here would leave a band of widths
+// where only the mixin's generic stacking applied.
+@media only screen and (max-width: 640px) {
     :host {
         flex-direction: column-reverse;
     }
 
     .sidebar {
-        width: 100%;
+        width: 100% !important;
         min-width: 100%;
         max-width: 100%;
         height: 50vh;
+        // The mixin caps the list's share; here the explicit height is the
+        // whole point of the bottom-drawer layout, so release the cap.
+        max-height: none;
         border-right: none;
         border-top: 1px solid var(--mat-sys-outline-variant);
+        border-bottom: none;
 
         // Sidebar collapse uses width=0 on desktop; on mobile the rail flips
         // to a bottom drawer so collapse it via height instead.
@@ -133,9 +140,6 @@
 
     .content-container {
         height: 50vh;
-    }
-
-    .sidebar-restore {
-        display: none;
+        min-height: 0;
     }
 }

libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.scss

@@ -90,6 +90,18 @@
         line-height: 1.3;
         letter-spacing: 0.02em;
         color: var(--mat-sys-on-surface-variant);
+        // A wrapping subtitle pushes the trigger past the 56px header row.
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+// On a phone the header row has no width to spare: the source type is already
+// implied by the icon, so the name gets the whole trigger.
+@media (max-width: 640px) {
+    .playlist-info .channels-count {
+        display: none;
     }
 }
 

libs/portal/catalog/feature/src/lib/category-content-view/category-content-view.component.scss

@@ -234,6 +234,13 @@ mat-paginator {
 
     mat-paginator {
         justify-self: start;
+
+        // The page-size select wraps onto a line of its own here, costing a
+        // row of an already short screen for a control nobody reaches for
+        // while browsing on a phone. The range and the arrows stay.
+        ::ng-deep .mat-mdc-paginator-page-size {
+            display: none;
+        }
     }
 }
 

libs/portal/shared/ui/src/lib/components/search-layout/search-layout.component.scss

@@ -169,3 +169,23 @@
     @include grid.content-grid;
     padding-bottom: 1rem;
 }
+
+// The header packs the title, the type filters and the scope toggle into one
+// row. On a phone that row is wider than the screen, and the scope checkbox
+// was the part pushed off the right edge, so the row becomes a column.
+@media (max-width: 640px) {
+    .header .header-top {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 12px;
+    }
+
+    .header .header-left {
+        gap: 12px;
+    }
+
+    .header .header-right {
+        justify-content: flex-start;
+        flex-wrap: wrap;
+    }
+}

libs/portal/stalker/feature/src/lib/stalker-live-stream-layout/stalker-itv-all-items.component.scss

@@ -12,6 +12,11 @@
 
 .category-content-header {
     @include panel.standard-panel-header($sticky: true);
+
+    // Same reason as the Xtream live header: the paginator does not shrink,
+    // so it must be able to drop to its own line rather than crowd the meta
+    // out of existence.
+    flex-wrap: wrap;
 }
 
 .category-meta {
@@ -49,7 +54,9 @@
 // painting its own (mismatched) Material surface color.
 mat-paginator {
     background: transparent !important;
-    flex-shrink: 0;
+    // Its own container already wraps internally, so letting it shrink turns
+    // a clipped next-page arrow into a second line of the paginator itself.
+    min-width: 0;
     --mat-paginator-container-size: 40px;
     --mat-paginator-enabled-icon-color: var(
         --app-body-color,
@@ -70,3 +77,24 @@ app-grid-list.all-items-grid {
     scrollbar-color: color-mix(in srgb, var(--app-muted-color) 55%, transparent)
         transparent;
 }
+
+// Mirrors the Xtream live header: on a phone the page-size select is the
+// widest part of the paginator and the least useful one, and the count it
+// costs is already stated by the range beside it.
+@media (max-width: 640px) {
+    .category-content-header {
+        padding-inline: 12px;
+    }
+
+    .category-subtitle {
+        display: none;
+    }
+
+    mat-paginator {
+        min-width: 0;
+
+        ::ng-deep .mat-mdc-paginator-page-size {
+            display: none;
+        }
+    }
+}

libs/portal/xtream/feature/src/lib/live-stream-layout/live-stream-layout.component.scss

@@ -43,6 +43,11 @@
 
 .category-content-header {
     @include panel.standard-panel-header($sticky: true);
+
+    // The paginator does not shrink, so on any window narrow enough that it
+    // and the category meta cannot share a line it took the whole row and the
+    // meta collapsed underneath it. Let it drop to a line of its own instead.
+    flex-wrap: wrap;
 }
 
 .category-meta {
@@ -59,7 +64,9 @@
 
 mat-paginator {
     background: transparent !important;
-    flex-shrink: 0;
+    // Its own container already wraps internally, so letting it shrink turns
+    // a clipped next-page arrow into a second line of the paginator itself.
+    min-width: 0;
     --mat-paginator-container-size: 40px;
     --mat-paginator-enabled-icon-color: var(
         --app-body-color,
@@ -116,3 +123,28 @@ app-grid-list.live-all-items-grid {
     line-height: 1.45;
     opacity: 0.74;
 }
+
+// The header is one flex row of "N channels" plus the paginator. The
+// paginator's intrinsic width alone exceeds a phone, which crushed the count
+// to zero width and left the two drawn on top of each other.
+@media (max-width: 640px) {
+    .category-content-header {
+        padding-inline: 12px;
+    }
+
+    // The paginator already states "1 – 25 of 320" right next to it, and the
+    // room it costs here is taken straight out of the category title.
+    .category-subtitle {
+        display: none;
+    }
+
+    mat-paginator {
+        min-width: 0;
+
+        // Dropped for the same reason as the catalog grid: it is the widest
+        // part of the control and the least useful one on a phone.
+        ::ng-deep .mat-mdc-paginator-page-size {
+            display: none;
+        }
+    }
+}

libs/ui/components/src/lib/content-hero/content-hero.component.scss

@@ -534,6 +534,26 @@
     }
 }
 
+// A phone cannot carry the poster and the details side by side: the details
+// column drops to ~200px, and the action buttons are then squeezed below
+// their own labels ("Play" clipped down to its icon). Stack them instead.
+@media (max-width: 640px) {
+    .hero__content {
+        flex-direction: column;
+        align-items: stretch;
+        padding-inline: 16px;
+    }
+
+    .poster {
+        width: 140px;
+        align-self: center;
+    }
+
+    .details__title {
+        text-align: center;
+    }
+}
+
 // ============================================================================
 // Animations
 // ============================================================================

libs/ui/styles/_panel-header.scss

@@ -29,6 +29,9 @@
     align-items: baseline;
     gap: $gap;
     flex: 1;
+    // `flex: 1` lets this shrink to zero width, and the nowrap subtitle then
+    // painted outside the box and on top of whatever sits beside it.
+    overflow: hidden;
 }
 
 @mixin standard-panel-title($font-size: 0.95rem) {

libs/ui/styles/_portal-layout.scss

@@ -178,4 +178,42 @@
             width: 100% !important;
         }
     }
+
+    // ─── Phone layout ────────────────────────────────────────────────────────
+    // Side by side, the 400px channel list leaves nothing for the player on a
+    // phone, so the two stack instead. The width needs `!important` because
+    // ResizableDirective writes the persisted desktop width inline; dragging
+    // is meaningless at full width, so the handle goes too.
+    @media (max-width: 640px) {
+        :host {
+            flex-direction: column;
+        }
+
+        .sidebar {
+            width: 100% !important;
+            min-width: 0 !important;
+            max-width: none;
+            flex-shrink: 1;
+            max-height: 42vh;
+            border-right: none;
+            border-bottom: 1px solid var(--app-separator);
+
+            &.sidebar-collapsed {
+                max-height: 0;
+                border-bottom-color: transparent;
+            }
+
+            .resize-handle {
+                display: none;
+            }
+        }
+
+        // The player's floor, not the list's ceiling, is what has to hold: a
+        // phone shows the categories panel above this layout too, and without
+        // a stated minimum the video ends up a sliver under two lists.
+        .content-container {
+            flex: 1 1 auto;
+            min-height: 240px;
+        }
+    }
 }

libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-settings-context-panel.component.scss

@@ -26,10 +26,17 @@
     flex: 1;
     min-height: 0;
     padding-top: 16px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 
+// `height: 100%` here does not resolve against a stretched flex item, so the
+// list kept its full content height and painted over the footer whenever the
+// panel was shorter than its sections (a phone, or a short desktop window).
 .settings-sections-list {
-    height: 100%;
+    flex: 1;
+    min-height: 0;
 }
 
 .settings-panel-footer {

libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-context-sidebar/workspace-shell-context-sidebar.component.scss

@@ -57,3 +57,47 @@
     min-height: 0;
     overflow: hidden;
 }
+
+.context-panel--settings app-workspace-settings-context-panel {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+// Below this width the shell stacks the panel above the content instead of
+// beside it. `!important` is required because ResizableDirective writes the
+// persisted desktop width as an inline style; a 300px panel on a 375px screen
+// leaves ~50px for the actual content. Dragging is meaningless when the panel
+// spans the full width, so the handle goes away with it.
+@media (max-width: 640px) {
+    .context-panel {
+        width: 100% !important;
+        max-width: none !important;
+        // There is no global border-box reset, so the panel's own padding
+        // would push a 100%-wide panel past the viewport.
+        box-sizing: border-box;
+        height: auto;
+        // Roughly a third of the screen: enough to show several entries
+        // without pushing the route's own content off the bottom.
+        max-height: 30vh;
+        border-right: none;
+        border-bottom: 1px solid var(--mat-sys-outline-variant);
+    }
+
+    .context-panel--collapsed {
+        max-height: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+        border-bottom-color: transparent;
+    }
+
+    .context-panel :is(.resize-handle) {
+        display: none;
+    }
+
+    .context-panel--route,
+    .context-panel--sources {
+        overflow: hidden;
+    }
+}

libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html

@@ -68,6 +68,7 @@
     <div class="header-actions header-actions--leading">
         <button
             type="button"
+            class="shortcuts-trigger"
             mat-icon-button
             (click)="onShortcutsRequested()"
             [matTooltip]="'WORKSPACE.SHORTCUTS.OPEN_TOOLTIP' | translate"

libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss

@@ -291,14 +291,40 @@
 }
 
 @media (max-width: 640px) {
+    .workspace-header {
+        padding-inline: 8px;
+        gap: 8px;
+    }
+
     .playlist-switcher {
-        width: auto;
-        min-width: 140px;
-        flex: 1;
+        width: 140px;
+        min-width: 0;
+        flex: 0 0 140px;
     }
 
     .search-field {
-        .search-chip--status {
+        // Without a floor of its own the three header regions add up to more
+        // than a phone-width header and the icons overlap.
+        min-width: 0;
+        flex: 1 1 auto;
+        padding-inline: 8px;
+
+        .search-chip--status,
+        .search-chip--scope {
+            display: none;
+        }
+
+        // Keyboard-only affordances on a screen that usually has no keyboard.
+        // The palette still opens via the actual shortcut and the rail.
+        .command-trigger {
+            display: none;
+        }
+    }
+
+    .header-actions--leading {
+        margin-left: 0;
+
+        .shortcuts-trigger {
             display: none;
         }
     }

libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail-links/workspace-shell-rail-links.component.scss

@@ -97,3 +97,34 @@
     background: var(--rail-link-active-icon, var(--app-selection-color));
     box-shadow: 0 0 10px var(--rail-link-active-glow, var(--app-selection-glow));
 }
+
+// The rail turns into a horizontal top bar below this width, so the links
+// have to follow. Without the row direction the host keeps stacking its
+// links downwards out of the 52px bar and they overlap the header.
+@media (max-width: 640px) {
+    :host {
+        width: auto;
+    }
+
+    .rail-links {
+        flex-direction: row;
+        width: auto;
+    }
+
+    .portal-rail-link {
+        width: 40px;
+        height: 40px;
+        flex: 0 0 auto;
+    }
+
+    .portal-rail-link.is-active::after,
+    .portal-rail-link.active::after {
+        right: auto;
+        top: auto;
+        bottom: -3px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 18px;
+        height: 3px;
+    }
+}

libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-rail/workspace-shell-rail.component.scss

@@ -227,13 +227,39 @@
 @media (max-width: 640px) {
     .app-rail {
         flex-direction: row;
-        justify-content: space-between;
-        padding: 6px 10px;
+        justify-content: flex-start;
+        gap: 4px;
+        padding: 6px 8px;
         border-right: none;
         border-bottom: 1px solid var(--mat-sys-outline-variant);
+        // A phone cannot fit every portal section at once, so the bar
+        // scrolls sideways instead of squeezing the icons into overlap.
+        overflow-x: auto;
+        overflow-y: hidden;
 
+        &.is-macos {
+            padding-top: 6px;
+        }
+
+        // The brand links to the dashboard, which the first workspace link
+        // already does. On a bar this narrow that duplicate costs a section.
         .brand {
-            margin-bottom: 0;
+            display: none;
+        }
+
+        a {
+            flex: 0 0 auto;
+        }
+
+        a.is-active::after,
+        a.active::after {
+            right: auto;
+            top: auto;
+            bottom: -2px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 18px;
+            height: 3px;
         }
     }
 
@@ -245,6 +271,10 @@
 
     .rail-context-region {
         width: auto;
+        // The vertical rail caps this at 48px; in a row that cap would
+        // stack every portal section on top of itself.
+        max-width: none;
+        flex: 0 0 auto;
         flex-direction: row;
         margin: 0;
         padding: 2px 4px;
@@ -261,7 +291,19 @@
         }
     }
 
+    // Settings sits at the end of a bar that scrolls sideways once a portal
+    // adds its sections, so it is pinned instead of scrolling out of reach.
     .rail-footer {
         margin-top: 0;
+        margin-left: auto;
+        flex: 0 0 auto;
+        position: sticky;
+        right: 0;
+        padding-left: 4px;
+        background: linear-gradient(
+            to right,
+            transparent,
+            var(--app-rail-bg, var(--mat-sys-surface-container-low)) 25%
+        );
     }
 }

libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.scss

@@ -92,6 +92,19 @@ app-workspace-shell-context-sidebar {
     .workspace-body {
         grid-column: 1;
         grid-row: 3;
+        // Side by side there is no room for both: a 300px context panel on a
+        // 375px screen leaves the content unusable, so they stack instead.
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-rows: auto minmax(0, 1fr);
+
+        &.single-pane {
+            grid-template-rows: minmax(0, 1fr);
+        }
+    }
+
+    .workspace-content {
+        border-radius: 0;
+        box-shadow: none;
     }
 
     .workspace-now-playing {