diff --git a/plugin-designs/rudder-voice/rudder-voice.vue b/plugin-designs/rudder-voice/rudder-voice.vue index 16903cfb1..78978ed84 100644 --- a/plugin-designs/rudder-voice/rudder-voice.vue +++ b/plugin-designs/rudder-voice/rudder-voice.vue @@ -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) {