From fd955076dd68893659e601bccafbca61d81aa93d Mon Sep 17 00:00:00 2001
From: Zac Gaetano <zgaetano@wilddragon.net>
Date: Thu, 21 May 2026 14:10:24 +0000
Subject: [PATCH] web-ui: fix codec/settings panel clipping in recorders.html

Flex-child overflow footgun: .slide-panel-body had flex:1 and overflow-y:auto
but without min-height:0 it never shrank below content height, so the new
Master/Proxy codec blocks overflowed past the panel bottom and the footer
(Cancel / Probe / Save buttons) was unreachable. Lock the panel to 100vh,
add min-height:0 to the body. Also drop redundant margin-bottom on
.codec-block since the body already has gap spacing.
---
 services/web-ui/public/recorders.html | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/services/web-ui/public/recorders.html b/services/web-ui/public/recorders.html
index 14c16c4..3398837 100644
--- a/services/web-ui/public/recorders.html
+++ b/services/web-ui/public/recorders.html
@@ -117,14 +117,22 @@
     .slide-panel { background: oklch(11% 0.018 250 / 0.98); border-left: 1px solid oklch(28% 0.04 260 / 0.6); }
     .slide-panel-header { border-bottom: 1px solid oklch(28% 0.04 260 / 0.4); padding: 18px 22px; }
     .slide-panel-title { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
-    .slide-panel-body { padding: 18px 22px; }
+    /* Flexbox overflow footgun fix: a flex child won't honour overflow:auto
+       unless we give it min-height:0. Without this, the new codec blocks
+       overflow past the panel bottom and the footer is unreachable. */
+    .slide-panel { height: 100vh; max-height: 100vh; overflow: hidden; }
+    .slide-panel-body {
+      padding: 18px 22px;
+      min-height: 0;
+      flex: 1;
+      overflow-y: auto;
+    }
 
     /* ── Codec tabs (Video / Audio / Container) ── */
     .codec-block {
       border: 1px solid oklch(28% 0.04 260 / 0.45);
       border-radius: 10px;
       background: oklch(12% 0.018 250 / 0.55);
-      margin-bottom: 14px;
       overflow: hidden;
     }
     .codec-block-header {