From 60ab388018bebfba22ef729b912d18e77544221d Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sat, 1 Aug 2026 16:56:52 +0200
Subject: [PATCH] fix(ui): let the channel list keep its height on a landscape
 phone
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-up to the review: the player floor added in the previous commit was
measured against the viewport, not against what the shell had left. On a
640x360 landscape phone the stacked categories panel already takes 30vh, so
claiming another 50vh here drove the channel sidebar to zero height while it
was still marked expanded — no way to pick another channel — and pushed the
layout past the viewport.

The floor now applies only where the screen can afford it (`min-height:
600px`), the sidebar states a floor of its own so it cannot be squeezed out,
and the collapsed rule clears that floor so hiding the list still works.
Below that height the two panes simply share what is left.

Portrait is unchanged: categories 244px, channel list 220px, player 240px on
a 375x812 screen.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 libs/ui/styles/_portal-layout.scss | 32 ++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/libs/ui/styles/_portal-layout.scss b/libs/ui/styles/_portal-layout.scss
index 154548b2d..153a6ced8 100644
--- a/libs/ui/styles/_portal-layout.scss
+++ b/libs/ui/styles/_portal-layout.scss
@@ -195,11 +195,16 @@
             max-width: none;
             flex-shrink: 1;
             max-height: 42vh;
+            // Without a floor of its own the player's minimum can take the
+            // whole body on a short screen and the list vanishes while still
+            // marked expanded, leaving no way to pick another channel.
+            min-height: 72px;
             border-right: none;
             border-bottom: 1px solid var(--app-separator);
 
             &.sidebar-collapsed {
                 max-height: 0;
+                min-height: 0;
                 border-bottom-color: transparent;
             }
 
@@ -208,22 +213,16 @@
             }
         }
 
-        // 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. 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: min(240px, 50vh);
         }
 
-        // Inside that container the guide is `flex: 0 0 <basis>`, 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.
+        // Inside that container the guide is `flex: 0 0 <basis>` while the
+        // video is `flex: 1 1 0`, so shrinking is distributed by basis and
+        // the video — basis zero — absorbed none of it and collapsed. Here
+        // the video keeps a floor and the guide is what gives way.
         .video-player {
-            min-height: 120px;
+            min-height: 96px;
         }
 
         .epg.epg--inline {
@@ -231,4 +230,15 @@
             min-height: 0;
         }
     }
+
+    // The player's floor, not the list's ceiling, is what has to hold — but
+    // only where the screen can afford it. A landscape phone already spends
+    // 30vh on the stacked categories panel, so claiming 240px more here left
+    // nothing for the channel list; there, the two panes just share what is
+    // left. Keyed on height because that, not width, is what runs out.
+    @media (max-width: 640px) and (min-height: 600px) {
+        .content-container {
+            min-height: 240px;
+        }
+    }
 }