From db2479a31080b9cef6d48e1bb4e327a2adda124f Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Mon, 28 Sep 2026 00:57:55 +0000 Subject: [PATCH] Gospel x Internet: the selection strip label is never clipped; only its chips clip --- plugin-designs/gospel-internet/src/components/GiCombos.vue | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/plugin-designs/gospel-internet/src/components/GiCombos.vue b/plugin-designs/gospel-internet/src/components/GiCombos.vue index ef83f84f3..fa6acb739 100644 --- a/plugin-designs/gospel-internet/src/components/GiCombos.vue +++ b/plugin-designs/gospel-internet/src/components/GiCombos.vue @@ -103,9 +103,10 @@ useShadowStyles( '.gic2{grid-area:combos;display:flex;align-items:center;gap:10px;padding:6px 14px;background:#fff;border-bottom:1px solid #d1d4cd;' + 'min-width:0;font:12.5px/1.3 Roboto,-apple-system,"Segoe UI",sans-serif;color:#3b463d}' + '.gic2-h{flex:none;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#6d766e}' + - // The selection side is BOUNDED and clips: its nowrap placeholder ran under "Try a combination" at 1280 - // and 1440 (rega r82). It now ellipsizes; the full text stays in the title tooltip. - '.gic2-sel{display:flex;align-items:center;gap:6px;min-width:0;flex:0 1 auto;max-width:40%;overflow:hidden}' + + // The selection side is BOUNDED at 40% (rega r82: the placeholder ran under "Try a combination"), but only + // its chips and placeholder clip: they scroll or ellipsize. No overflow here and no min-width:0, so the + // flex:none label sets the minimum width and is never cut ('YOUR S…' at 390, the zh/ru/hi/ar labels at 1280). + '.gic2-sel{display:flex;align-items:center;gap:6px;flex:0 1 auto;max-width:40%}' + '.gic2-none{color:#9aa19b;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}' + '.gic2-try{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto;overflow-x:auto;scrollbar-width:thin}' + '.gic2-c{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid #d1d4cd;background:#f3f3f1;color:#3b463d;border-radius:999px;' +