From dbe221af94eb3dd406c096f1a1b7b4ada6c0ee43 Mon Sep 17 00:00:00 2001 From: dawn Date: Tue, 25 Aug 2026 22:32:56 +0900 Subject: [PATCH] web: decouple combobox menu width Signed-off-by: dawn --- web/src/lib/components/ui/Combobox.svelte | 4 +--- web/src/lib/components/ui/Dropdown.svelte | 2 +- web/src/lib/components/ui/TagInput.svelte | 3 ++- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/web/src/lib/components/ui/Combobox.svelte b/web/src/lib/components/ui/Combobox.svelte index e52137bb..ba0862d8 100644 --- a/web/src/lib/components/ui/Combobox.svelte +++ b/web/src/lib/components/ui/Combobox.svelte @@ -10,7 +10,7 @@ value: "min-w-0 flex-1 truncate text-left typography-paragraph-regular", panel: "combobox-panel fixed inset-auto z-50 m-0 hidden h-fit max-h-[min(24rem,calc(100dvh-1rem))] w-80 max-w-[calc(100vw-1rem)] popover-transition flex-col overflow-hidden rounded-sm border border-border-default bg-background-default p-0 text-foreground-default shadow-regular open:flex dark:shadow-none", search: "shrink-0 border-b border-border-default p-2", - list: "min-h-0 flex-auto overflow-y-auto p-1", + list: "min-h-0 flex-auto touch-pan-y overflow-y-auto overscroll-contain p-1 [-webkit-overflow-scrolling:touch]", groupHeading: "px-2 pt-2 pb-1 font-semibold text-foreground-muted first:pt-1", option: "flex w-full cursor-pointer items-center gap-2 rounded-sm bg-transparent px-2 py-1.5 text-left aria-disabled:cursor-not-allowed aria-disabled:text-foreground-disabled data-active:bg-background-subtle dark:data-active:bg-background-subtle", check: "size-4 shrink-0 text-foreground-default", @@ -348,8 +348,6 @@ /* the gap to the trigger — margin, because position-area owns inset */ margin-top: 0.25rem; position-try: flip-block; - /* as wide as the trigger, instead of the fixed fallback width */ - width: anchor-size(width); } .combobox-panel[data-align="left"] { diff --git a/web/src/lib/components/ui/Dropdown.svelte b/web/src/lib/components/ui/Dropdown.svelte index 27be2a78..9813fa18 100644 --- a/web/src/lib/components/ui/Dropdown.svelte +++ b/web/src/lib/components/ui/Dropdown.svelte @@ -9,7 +9,7 @@ root: "relative inline-flex", plainTrigger: "min-h-0 gap-1 border-0 bg-transparent p-0 text-inherit hover:bg-transparent", - menu: "dropdown-menu fixed inset-auto z-50 m-0 h-fit max-h-[calc(100dvh-1rem)] w-56 max-w-[calc(100vw-1rem)] popover-transition divide-y divide-border-default overflow-auto rounded-sm border border-border-default bg-background-default text-foreground-default shadow-regular" + menu: "dropdown-menu fixed inset-auto z-50 m-0 h-fit max-h-[calc(100dvh-1rem)] w-56 max-w-[calc(100vw-1rem)] popover-transition touch-pan-y divide-y divide-border-default overflow-auto overscroll-contain rounded-sm border border-border-default bg-background-default text-foreground-default shadow-regular [-webkit-overflow-scrolling:touch]" }, variants: { align: { diff --git a/web/src/lib/components/ui/TagInput.svelte b/web/src/lib/components/ui/TagInput.svelte index e4895910..d6257566 100644 --- a/web/src/lib/components/ui/TagInput.svelte +++ b/web/src/lib/components/ui/TagInput.svelte @@ -22,7 +22,8 @@ remove: "text-foreground-inherit -mr-0.5 flex min-h-0 shrink-0 rounded-xs p-0 transition-colors focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-border-focus", draft: "w-full min-w-0 bg-transparent outline-none placeholder:text-foreground-placeholder placeholder:transition-opacity placeholder:duration-200 disabled:cursor-not-allowed motion-reduce:placeholder:transition-none", panel: "tag-panel fixed inset-auto z-50 m-0 hidden h-fit max-h-[min(18rem,calc(100dvh-1rem))] w-72 max-w-[calc(100vw-1rem)] popover-transition flex-col overflow-hidden rounded-sm border border-border-default bg-background-default p-0 text-foreground-default open:flex", - options: "min-h-0 flex-auto overflow-y-auto p-1", + options: + "min-h-0 flex-auto touch-pan-y overflow-y-auto overscroll-contain p-1 [-webkit-overflow-scrolling:touch]", option: "flex w-full cursor-pointer items-center gap-2 rounded-sm bg-transparent px-2 py-1.5 text-left data-active:bg-background-subtle", optionLabel: "min-w-0 flex-1 truncate", empty: "px-2 py-6 text-center text-foreground-muted", -- 2.51.2