From 9a7a438a964277591bfc4242e2a59805131b623c Mon Sep 17 00:00:00 2001 From: dev Date: Tue, 21 Jul 2026 02:50:36 +0200 Subject: [PATCH] fix(emoji-picker): panel encaja en el Popover + ancho tokenizado, sin overflow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit El contenido (331px) desbordaba el Popover (~284px, --popover-min-width-md) y el viewport lo recortaba con scroll horizontal — la ultima columna de emojis salia cortada, evidente en oscuro. Fixes: - El Popover recibe su ancho via prop `width` = TOKEN `--emoji-picker-panel-width` (23rem, token de componente al estilo color-picker content-width — NO hardcode). El contenido pasa a inline-size:100%; nada desborda el popover. - PopoverContent size="sm" (padding mas ajustado) + categorias en ToggleGroup size="xs" → las 9 caben sin scroll (antes 6/9). Tonos size="sm". - scrollbar-width:thin en el grid (el unico scroll, vertical, esperado). Tamaños: iconos/glifos canonicos (Icon size, --size-lg/xl-font-size, ToggleGroup size); grid-max-block-size min(50vh,17rem) replica el patron de command.css. Verificado en claro Y oscuro (capturas): content Hscroll 0, strip Hscroll 0, 9 categorias visibles, celda 36px, un solo panel; component:audit PASS · eidos-lint invalid 0 · recipe-contract 30/30 · check baseline 76. Co-Authored-By: Claude Opus 4.8 --- .../emoji-picker/emoji-picker-content.svelte | 11 ++++++++++- .../eidos/components/emoji-picker/emoji-picker.css | 7 +++++-- src/uix/eidos/generated/base.css | 2 +- src/uix/eidos/lib/recipes/base.ts | 6 ++++-- 4 files changed, 20 insertions(+), 6 deletions(-) diff --git a/src/uix/eidos/components/emoji-picker/emoji-picker-content.svelte b/src/uix/eidos/components/emoji-picker/emoji-picker-content.svelte index 563ef531f..38a16ecf1 100644 --- a/src/uix/eidos/components/emoji-picker/emoji-picker-content.svelte +++ b/src/uix/eidos/components/emoji-picker/emoji-picker-content.svelte @@ -47,7 +47,14 @@ - + { const v = arr[0]; @@ -103,6 +111,7 @@ selectionMode="single" deselectable={false} variant="ghost" + size="sm" value={[String(provider.opts.tone.current)]} onValueChange={(arr) => { const v = arr[0]; diff --git a/src/uix/eidos/components/emoji-picker/emoji-picker.css b/src/uix/eidos/components/emoji-picker/emoji-picker.css index 197d9ce31..2105bb11d 100644 --- a/src/uix/eidos/components/emoji-picker/emoji-picker.css +++ b/src/uix/eidos/components/emoji-picker/emoji-picker.css @@ -57,8 +57,10 @@ display: flex; flex-direction: column; gap: var(--emoji-picker-panel-gap); - inline-size: var(--emoji-picker-panel-width); - max-inline-size: 100%; + /* The Popover owns the width (via its `width` prop); the panel fills it so + nothing overflows the popover box. */ + inline-size: 100%; + min-inline-size: 0; } [data-emoji-picker-header] { @@ -89,6 +91,7 @@ max-block-size: var(--emoji-picker-grid-max-block-size); overflow-y: auto; overscroll-behavior: contain; + scrollbar-width: thin; padding-inline: var(--space-0-5); padding-block-end: var(--space-0-5); } diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css index feb8ac8e6..345fc1149 100644 --- a/src/uix/eidos/generated/base.css +++ b/src/uix/eidos/generated/base.css @@ -1009,7 +1009,7 @@ --emoji-picker-trigger-size: var(--size-md-control-height); --emoji-picker-trigger-radius: var(--radius-md); --emoji-picker-trigger-font-size: var(--size-md-font-size); - --emoji-picker-panel-width: min(21rem, 92vw); + --emoji-picker-panel-width: 23rem; --emoji-picker-panel-gap: var(--space-2); --emoji-picker-header-gap: var(--space-2); --emoji-picker-grid-gap: var(--space-0-5); diff --git a/src/uix/eidos/lib/recipes/base.ts b/src/uix/eidos/lib/recipes/base.ts index 072652521..3cd83f7c7 100644 --- a/src/uix/eidos/lib/recipes/base.ts +++ b/src/uix/eidos/lib/recipes/base.ts @@ -886,8 +886,10 @@ export const THEME_BASE_RECIPE_TOKENS = defineRecipes({ 'trigger-size': 'var(--size-md-control-height)', 'trigger-radius': 'var(--radius-md)', 'trigger-font-size': 'var(--size-md-font-size)', - // ── Panel (the portaled picker; Popover provides surface + depth) ─ - 'panel-width': 'min(21rem, 92vw)', + // ── Panel (portaled; Popover provides surface + depth). The picker owns + // its width as a component token (color-picker precedent: a concrete rem + // sized to ~9 emoji columns), passed to the Popover's `width`. ───────── + 'panel-width': '23rem', 'panel-gap': 'var(--space-2)', 'header-gap': 'var(--space-2)', // ── Grid (a scrollable CSS grid of emoji cells) ───────────────────