diff --git a/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss index 0b38a9387..5e9c2fff5 100644 --- a/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss +++ b/libs/playlist/m3u/feature-player/src/lib/video-player/video-player.component.scss @@ -138,8 +138,10 @@ } } + // Keeps the mixin's player floor rather than releasing it: `height: 50vh` + // is a preference, not a reservation, so on a short landscape phone the + // drawer could otherwise squeeze the video away entirely. .content-container { height: 50vh; - min-height: 0; } } diff --git a/libs/ui/styles/_portal-layout.scss b/libs/ui/styles/_portal-layout.scss index c3568e563..154548b2d 100644 --- a/libs/ui/styles/_portal-layout.scss +++ b/libs/ui/styles/_portal-layout.scss @@ -210,10 +210,25 @@ // 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. + // a stated minimum the video ends up a sliver under two lists. The + // floor yields on a landscape phone, where 240px is most of the shell + // body and claiming it would starve the list instead. .content-container { flex: 1 1 auto; - min-height: 240px; + min-height: min(240px, 50vh); + } + + // Inside that container the guide is `flex: 0 0 `, so on a + // short screen it took its full basis out of a container that no + // longer had it and the video was left with nothing. Here the video + // keeps a floor and the guide is what gives way. + .video-player { + min-height: 120px; + } + + .epg.epg--inline { + flex-shrink: 1; + min-height: 0; } } } diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html index 648145c00..776b3a7ae 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html +++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.html @@ -55,7 +55,14 @@ 'WORKSPACE.SHELL.OPEN_COMMAND_PALETTE' | translate " > - {{ commandShortcutLabel }} + + {{ + commandShortcutLabel + }} + bolt } diff --git a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss index 5790b6cf6..51ce5be6c 100644 --- a/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss +++ b/libs/workspace/shell/feature/src/lib/workspace-shell/components/workspace-shell-header/workspace-shell-header.component.scss @@ -116,6 +116,13 @@ } } + .command-trigger__icon { + display: none; + font-size: 16px; + width: 16px; + height: 16px; + } + .command-trigger { display: inline-flex; align-items: center; @@ -314,11 +321,29 @@ display: none; } - // Keyboard-only affordances on a screen that usually has no keyboard. - // The palette still opens via the actual shortcut and the rail. + // An carries an intrinsic min-width from its `size`, and + // `min-width: auto` on a flex item honours it — so the input refused + // to shrink and pushed the trigger out of the field and onto the + // buttons beside it. + input { + min-width: 0; + } + + // This button is the only pointer-driven way into the command + // palette, so it stays; only its keyboard-shortcut label is swapped + // for an icon that means something without a keyboard. .command-trigger { + min-width: 28px; + padding: 0 4px; + } + + .command-trigger__shortcut { display: none; } + + .command-trigger__icon { + display: inline-flex; + } } .header-actions--leading {