WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 32 Pull requests 7 Projects Releases Packages Wiki Activity Actions

web-ui: fix codec/settings panel clipping in recorders.html

Browse source 
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.
This commit is contained in:
Zac Gaetano 2026-05-21 14:10:24 +00:00
parent 89ceef444e
commit fd955076dd
1 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
services/web-ui/public/recorders.html
View file

@ -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 { 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-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-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 tabs (Video / Audio / Container) ── */
.codec-block { .codec-block {
border: 1px solid oklch(28% 0.04 260 / 0.45); border: 1px solid oklch(28% 0.04 260 / 0.45);
border-radius: 10px; border-radius: 10px;
background: oklch(12% 0.018 250 / 0.55); background: oklch(12% 0.018 250 / 0.55);
margin-bottom: 14px;
overflow: hidden; overflow: hidden;
} }
.codec-block-header { .codec-block-header {