From eb9f2fddd3787c1a9d690b0efb6802d53738e9c5 Mon Sep 17 00:00:00 2001 From: dev Date: Mon, 22 Jun 2026 17:38:10 +0200 Subject: [PATCH] fix(command): concentric items + align dialog input/options + close overlap MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Concentric (A2): the items hand-rolled `calc(--radius-md − space)` = 2px, using radius-md as the outer instead of the panel radius — a latent bug (the comment claimed "panel radius − inset"). Adopt `[data-shape-nest]`: the panel exposes --shape-outer-radius (FIXED `lg`, so items stay 6px in BOTH the inline palette and inside — they aren't at the dialog's corner, so they must not inflate to the dialog radius) + --shape-nest-gap. Items 2px → 6px (truly concentric), verified inline + in-dialog. Command-dialog layout (reported as broken): - Options were inset LESS than the input (list padding-inline space-1=4 vs input margin space-2=8) → misaligned. List inset → space-2: the input box + option pills now share one left/right edge (measured: both at x=187). - The floating top-right close OVERLAPPED the input — the old reserve cleared only the input TEXT (padding-inline-end), not the box. Clear the BOX instead (margin-inline-end = close inset + size + gap) so the close sits in the gap to the right (measured: input ends 689, close starts 691 — no overlap). Verified by DOM measurement (rects + computed radius). Screenshot omitted: the modal's backdrop-filter hangs the headless capture (preview infra); the layout computes cleanly. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../components/command/command-item.svelte | 2 +- .../command/command-link-item.svelte | 2 +- src/uix/eidos/components/command/command.css | 28 +++++++++++++------ 3 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/uix/eidos/components/command/command-item.svelte b/src/uix/eidos/components/command/command-item.svelte index ad0ccb1cd..62697acc8 100644 --- a/src/uix/eidos/components/command/command-item.svelte +++ b/src/uix/eidos/components/command/command-item.svelte @@ -4,4 +4,4 @@ let { children, ...rest }: CommandItemProps = $props(); -{@render children?.()} +{@render children?.()} diff --git a/src/uix/eidos/components/command/command-link-item.svelte b/src/uix/eidos/components/command/command-link-item.svelte index 5ce697ceb..62fa0c682 100644 --- a/src/uix/eidos/components/command/command-link-item.svelte +++ b/src/uix/eidos/components/command/command-link-item.svelte @@ -4,4 +4,4 @@ let { children, ...rest }: CommandLinkItemProps = $props(); -{@render children?.()} +{@render children?.()} diff --git a/src/uix/eidos/components/command/command.css b/src/uix/eidos/components/command/command.css index 2d34b9a96..0a90d7d14 100644 --- a/src/uix/eidos/components/command/command.css +++ b/src/uix/eidos/components/command/command.css @@ -32,6 +32,14 @@ it's overridden to the dialog panel's radius so the input corner stays parallel to the ACTUAL outer corner. */ --_command-radius: var(--radius-lg); + /* Concentric items: expose the radius + inline inset to the shared + `[data-shape-nest]` rule. Outer = the command's list radius (`lg`, FIXED) so + items stay concentric with the list region in BOTH the inline palette and + inside . The items aren't at the dialog's corner (the input + + list padding sit above them), so they must NOT inflate to the dialog radius; + only the input adapts to it via --_command-radius. gap = the list inline pad. */ + --shape-outer-radius: var(--radius-lg); + --shape-nest-gap: var(--space-1); display: flex; flex-direction: column; @@ -76,11 +84,11 @@ padding: 0; } -/* Reserve room at the input's inline-end so the placeholder / query never runs - under the floating close — which sits at the dialog's default top-right inset, - centred on the boxed input row. */ +/* Clear the floating top-right close: the input BOX (not just its text) stops + before the close — margin, not padding — so the two never overlap. The close + then sits cleanly in the gap at the right of the search row. */ [data-dialog-content] [data-command-input] { - padding-inline-end: calc(var(--control-height-sm) + var(--space-2)); + margin-inline-end: calc(var(--dialog-close-inset) + var(--dialog-close-size) + var(--space-2)); } [data-command][data-size='sm'] { @@ -158,7 +166,9 @@ display: flex; flex-direction: column; gap: var(--space-1); - padding-inline: var(--space-1); + /* Inline inset matches the input's inline margin (space-2) so the option pills + and the search box share ONE left/right edge. */ + padding-inline: var(--space-2); padding-block-end: var(--space-1); overscroll-behavior: contain; } @@ -167,7 +177,7 @@ [data-command-list] [data-scroll-area]:has(> [data-scroll-area-scrollbar][data-orientation='vertical']) > [data-scroll-area-viewport] { - padding-inline-end: calc(var(--space-1) + var(--space-3-5)); + padding-inline-end: calc(var(--space-2) + var(--space-3-5)); } [data-command-viewport] { @@ -210,9 +220,9 @@ align-items: center; gap: var(--space-2); padding-inline: var(--_command-item-px); - /* Height + block padding come from the canonical archetype (density-driven - `--space-*`). Radius concentric with the panel: panel radius − inset. */ - border-radius: calc(var(--radius-md) - var(--space-1)); + /* Concentric radius from the shared `[data-shape-nest]` rule — the panel exposes + --shape-outer-radius (its REAL radius, not radius-md) + --shape-nest-gap above. + Height + block padding: the canonical archetype. */ color: var(--color-content-primary); font-size: var(--_command-item-font-size); line-height: var(--leading-ui);