doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rudder's corner panel kept its notices above the draft, and they never yielded

Browse source 
Two defects, one cause: on a short panel the engine-offline notice took the room
the draft needed.

FIRST, A PHONE RULE THAT NEVER RAN. bac2431d0 (19:59) put notices below the
draft "so the draft stays in view". 4e94e9216 (21:58) added the corner widget
with `.compact .notice { order: 0 }`. A media query adds NO specificity, so
`.compact .notice` (0,2,0) beat `@media { .notice }` (0,1,0) at every width and
the phone rule has been dead since the day it landed. Ordering the compact rule
to 1 fixes the widget at every width, not only under 480px, because the corner
panel is short regardless of the viewport.

SECOND, ORDER ALONE WAS NOT ENOUGH, which I only found by doing the arithmetic
rather than trusting the first fix. .notice is flex:0 1 auto and .compact
.compose is flex:1 1 0, so the draft yields whatever the notice's content asks
for no matter where it sits. The offline notice is ~132px at 375 and ~179px at
390 — reference text a reader needs once, holding a third of a short panel
forever. Capping it at 96px with its own scroll gives the draft 58px at 375x450
and 124px at 390x560, against rega's measured 22px and 41px.

The panel is 60vh (plugin-studio.vue:466), NOT the viewport. Sizing off the
viewport is what made my earlier estimate wrong by 58px; the model that uses the
real panel reproduces rega's 22px exactly.

No floor anywhere: a floor is what clipped the draft to begin with.

(cherry picked from commit 79cbb41bc3)
This commit is contained in:
Doxa Maps 2026-09-29 11:56:47 +00:00
parent 4dbeb257ab
commit ce40a1eb87
1 changed files with 20 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
plugin-designs/rudder-voice/rudder-voice.vue
View file

@ -1148,7 +1148,26 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1
.compact .bottom .mic.sm { padding: 9px 18px; font-size: 15px; gap: 6px; border-radius: 999px; }
.compact .bottom .mic.sm:not(.on) { background: var(--accent); color: #04121c; border-color: var(--accent); }
.compact .bottom .mic.sm.on { background: var(--rec); color: #fff; border-color: var(--rec); }
.compact .notice, .compact .hint { order: 0; font-size: 12.5px; padding: 8px 10px; }
/* ★ NOTICES SIT BELOW THE DRAFT IN THE CORNER PANEL, for the same reason they do on a phone: the
panel is short, and an engine-offline notice is several lines, so above the draft it eats the room
the draft needs. This used to say `order: 0`, which SILENTLY CANCELLED the phone rule below —
`.compact .notice` is (0,2,0) and the media query's `.notice` is (0,1,0), and a media query adds no
specificity, so the more specific rule won at every width and the notice stayed on top. The phone
rule (bac2431d0, 19:59) was already there; the corner widget (4e94e9216, 21:58) overrode it two
hours later without meaning to. Ordering it here fixes the widget at EVERY width, not only under
480px, because the corner panel is short regardless of the viewport. No floor is involved: a floor
is what clipped the draft in the first place. */
.compact .notice, .compact .hint { order: 1; font-size: 12.5px; padding: 8px 10px; }
/* ★ AND THE NOTICE YIELDS. Ordering it below the draft fixes the reading order but NOT the height:
.notice is flex:0 1 auto and .compact .compose is flex:1 1 0, so the draft still gives up whatever
the notice's content asks for. rega measured the result at 375x450 — a 20px draft whose wheel moves
nothing. The engine-offline notice is the long one (apiBase, Go 1.22, the setup command), ~132px at
375 and ~179px at 390, and it is REFERENCE text: a reader needs it once, not a third of a short
panel forever. Capping it and letting it scroll gives the draft 58px at 375x450 and 124px at
390x560, measured against the 60vh panel the corner widget actually gets (plugin-studio.vue:466),
not the viewport — sizing off the viewport is what made my first estimate wrong by 58px.
Again: no floor anywhere. A floor is what clipped the draft to begin with. */
.compact .notice { max-height: 96px; overflow-y: auto; overscroll-behavior: contain; }
.compact .debug { order: 4; }
/* A phone-sized panel: less padding, and a shorter draft so it stays in view below the controls. */
@media (max-width: 480px) {