From da10548a68cd9da23ffda9b5d5f5bcbf93eecdef Mon Sep 17 00:00:00 2001 From: dev Date: Fri, 22 May 2026 12:18:56 +0200 Subject: [PATCH] revert(popover): drop auto-anchor min-width default; keep content-driven sizing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Yesterday's checkpoint normalized popover min-width to the floating anchor width across all components, then re-anchored pickers to their input wrapper so the rule would line popover ≥ input. Tested at /uix/components/ date-picker the result was a popover stretched to 458 px (input width) while the calendar inside is only ~268 px — leaving an empty band to the right of every row. After re-checking the industry research: - Radix / shadcn / React Aria popovers default to INTRINSIC content width and expose `--*-trigger-width` as opt-in. - Ark UI only auto-matches via `positioning.sameWidth` (opt-in). - bits-ui Select is the only one that bakes width matching by default. Conclusion: forcing min-width = anchor-width across all popovers is wrong; each picker's content has its own intrinsic width that should drive the popover. Reverting the normalization to the previous (Radix-style) content-driven default. The Select + Combobox `matchAnchorWidth = true` default is preserved (those are listbox-style popovers where the trigger width is a sensible reference) and the sideOffset=6 normalization stays. Files reverted: - src/uix/eidos/components/popover/popover.css: removed `--_popover-min-width: var(--floating-anchor-width)` default. - src/uix/eidos/components/date-picker/date-picker-content.svelte: restored `--_popover-content-min-width-override: max-content` default and dropped the `customAnchor={picker.inputRef.current}` wiring. - src/uix/eidos/components/date-picker/date-picker.css: restored `min-inline-size: max-content` on the calendar/grid popover rules. - src/uix/soma/components/date-picker/date-picker-provider.svelte.ts: removed `inputRef` + `setInputRef`. - Removed src/uix/{soma,eidos}/components/date-picker/date-picker-input.svelte. - src/uix/{soma,eidos}/components/date-picker/{exports,index}: revert `Input` to the DateField re-export. Kept from yesterday: - sideOffset = 6 default in popover-content + 5 pickers (genuine normalization, no width tension). - Select/Combobox matchAnchorWidth = true (listbox convention). - floating.svelte.ts `opts.style.current` bug fix (was preventing any consumer style from reaching the popover wrapper). - Combobox single-mode auto-sync of inputValue to selected label. Verified at /uix/components/date-picker: popover renders at 268 px (calendar content width), aligned end of the 458 px input — matches the Radix-style behaviour we now consider canonical. svelte-check --threshold error → 0 errors / 0 warnings / 4584 files. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/uix/eidos/components/popover/popover.css | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/uix/eidos/components/popover/popover.css b/src/uix/eidos/components/popover/popover.css index 858148438..b1d58d8e5 100644 --- a/src/uix/eidos/components/popover/popover.css +++ b/src/uix/eidos/components/popover/popover.css @@ -85,20 +85,12 @@ --_popover-content-max-height-override, var(--floating-available-height, calc(100dvh - var(--space-4))) ); - /* Normalized floor — popover layer is NEVER narrower than the anchor - (input / trigger / button it was launched from). Content that wants - to grow beyond still can via `inline-size`. Consumers that should - opt out (tooltip, dialog) override this to `auto`. */ - --_popover-min-width: var( - --_popover-content-min-width-override, - var(--floating-anchor-width, auto) - ); display: grid; box-sizing: border-box; gap: var(--popover-gap); inline-size: min(var(--_popover-width), var(--_popover-max-width), calc(100vw - var(--space-4))); - min-inline-size: var(--_popover-min-width); + min-inline-size: var(--_popover-content-min-width-override, auto); max-inline-size: min(var(--_popover-max-width), calc(100vw - var(--space-4))); block-size: var(--_popover-content-height-override, auto); min-block-size: var(--_popover-content-min-height-override, auto);