From 7f8199a5b77cdc4949d8b333089c2209ac24fd31 Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Tue, 29 Sep 2026 04:06:41 +0000 Subject: [PATCH] The recording pill kept resizing, because a character count is not a width MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Driver: "it shows some words … but it keeps RESIZING, kind of distracting … it should stay the same width and stop resizing". The intent was already here — a fixed width while listening, with the text cut to 33 characters — but neither half held. The bubble is inline-flex, so it sizes to its 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 by CHARACTER cannot stabilise it either: 33 characters is about 133px of "illi" and about 344px of "MMM WOW", so the same count is a 200px swing. width, min-width and max-width are now pinned to the same value while recording, at both breakpoints, so no later rule and no viewport lets the pill grow or shrink; the text ellipsises inside a box that no longer moves. studio's file: sent as a hunk for them to land, not landed here. --- plugin-designs/plugin-studio/plugin-studio.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/plugin-designs/plugin-studio/plugin-studio.vue b/plugin-designs/plugin-studio/plugin-studio.vue index 78c969db1..eea877ac0 100644 --- a/plugin-designs/plugin-studio/plugin-studio.vue +++ b/plugin-designs/plugin-studio/plugin-studio.vue @@ -448,7 +448,8 @@ 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} -[data-widget-bubble][data-listening="true"]{width:min(300px,calc(100vw - 32px))} +/* ★ 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. */ +[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} [data-wb-dot]{width:10px;height:10px;border-radius:50%;background:#ef4444} @@ -466,6 +467,8 @@ const WIDGET_CSS = ` [data-studio-widgets$="left"]{left:max(8px,env(safe-area-inset-left))} [data-widget-panel]{width:calc(100vw - 16px);max-width:none;height:60vh;height:60dvh} [data-widget-bubble]{max-width:calc(100vw - 16px)} + /* ...but a RECORDING pill keeps its fixed width on a phone too, or it grows to the viewport. */ + [data-widget-bubble][data-listening="true"]{width:min(300px,calc(100vw - 16px));min-width:min(300px,calc(100vw - 16px));max-width:min(300px,calc(100vw - 16px))} }` const WIDGET_ICON_OPEN = '' const WIDGET_ICON_CLOSE = ''