diff --git a/plugin-designs/plugin-studio/plugin-studio.vue b/plugin-designs/plugin-studio/plugin-studio.vue index 9d7e33468..9f80f57fa 100644 --- a/plugin-designs/plugin-studio/plugin-studio.vue +++ b/plugin-designs/plugin-studio/plugin-studio.vue @@ -447,7 +447,7 @@ const WIDGET_CSS = ` [data-wb-icon]{display:grid;place-items:center;flex:none;color:#38bdf8} [data-wb-icon] svg,[data-wb-chev] svg{width:20px;height:20px;display:block} [data-wb-text]{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} -/* ★ WHILE RECORDING THE PILL DOES NOT BREATHE. The Driver: "it keeps RESIZING, kind of distracting — it should stay the same width". width alone was not enough: the bubble is inline-flex, so it still sizes to content wherever width loses — and it carries a max-width that the <=480px query overrides, which is exactly the phone case he was looking at. Truncating the text cannot fix it either: 33 CHARACTERS is 133px of "illi" and 344px of "MMM WOW", so a character count is not a width. min-width and max-width are pinned to the same value as width so no later rule and no viewport can let it grow or shrink; the text ellipsises inside it. */ +/* ★ WHILE RECORDING THE PILL DOES NOT BREATHE. A recording pill that changes width on every word reads as instability. width alone was not enough: the bubble is inline-flex, so it still sizes to content wherever width loses — and it carries a max-width that the <=480px query overrides, which is exactly the phone case he was looking at. Truncating the text cannot fix it either: 33 CHARACTERS is 133px of "illi" and 344px of "MMM WOW", so a character count is not a width. min-width and max-width are pinned to the same value as width so no later rule and no viewport can let it grow or shrink; the text ellipsises inside it. */ [data-widget-bubble][data-listening="true"]{width:min(300px,calc(100vw - 32px));min-width:min(300px,calc(100vw - 32px));max-width:min(300px,calc(100vw - 32px))} [data-widget-bubble][data-listening="true"] [data-wb-text]{flex:1 1 auto} [data-wb-dot],[data-wb-chev]{display:none;flex:none} diff --git a/plugin-designs/rudder-voice/rudder-voice.vue b/plugin-designs/rudder-voice/rudder-voice.vue index 8136d6da7..e6d40357c 100644 --- a/plugin-designs/rudder-voice/rudder-voice.vue +++ b/plugin-designs/rudder-voice/rudder-voice.vue @@ -1171,8 +1171,8 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1 .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) { - /* ★ THE TEXT AREA GETS THE LEFTOVER SPACE AND SCROLLS. The Driver on a phone: "a lot of header - space … fills the entire page … I can't scroll down in the text area and see everything". The + /* ★ THE TEXT AREA GETS THE LEFTOVER SPACE AND SCROLLS. On a phone the header can take most of the panel, leaving the draft unscrollable and its + last lines unreachable. The panel is capped at 60vh here, and a min-height on the draft cannot fix that: a MINIMUM makes the box refuse to shrink, so whatever the header takes is pushed off the bottom and the draft's own scrollbar never appears. Lowering it from 240 to 180 only moved the threshold.