fix(command): concentric items + align dialog input/options + close overlap

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 <Command.Dialog> — 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) <noreply@anthropic.com>
active-uix
dev 4 months ago
parent 4aea4b8121
commit eb9f2fddd3

@ -4,4 +4,4 @@
let { children, ...rest }: CommandItemProps = $props();
</script>
<Command.Item {...rest}>{@render children?.()}</Command.Item>
<Command.Item data-shape-nest {...rest}>{@render children?.()}</Command.Item>

@ -4,4 +4,4 @@
let { children, ...rest }: CommandLinkItemProps = $props();
</script>
<Command.LinkItem {...rest}>{@render children?.()}</Command.LinkItem>
<Command.LinkItem data-shape-nest {...rest}>{@render children?.()}</Command.LinkItem>

@ -32,6 +32,14 @@
<Command.Dialog> 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 <Command.Dialog>. 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);

Loading…
Cancel
Save

Powered by TurnKey Linux.