fix(command): ghost+neutral close, centered + separated from the input

Refine the command-dialog close per review:
- Solid primary → `variant="ghost" color="neutral"` — a subtle borderless gray X
  instead of a loud solid purple button.
- The input cleared the close by `--dialog-close-size` (a glyph token that
  under-measured the button) → only a 2px gap. Use `--control-height-md` (the
  close's real IconButton footprint) → 4px to the button + ghost padding.
- The floating close inherited the dialog's top inset (tuned for a title row) →
  5px below the input's center. Override its top to space-2 → centered on the
  input row (1px offset).

Verified by measurement: ghost transparent bg · neutral gray X (chroma 0) · gap
4px · vOffset 1px · no overlap. Screenshot omitted — the modal 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 c568b4df6c
commit 67d419f839

@ -62,7 +62,7 @@
<Dialog.Portal>
{#if overlay}{@render overlay()}{:else}<Dialog.Overlay />{/if}
<Dialog.Content size={dialogSize}>
<Dialog.Close position="top-right" />
<Dialog.Close position="top-right" variant="ghost" color="neutral" />
<CommandRoot
{label}
bind:value

@ -85,10 +85,17 @@
}
/* 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. */
before the close — margin, not padding — so the two never overlap, with a
comfortable gap. `--control-height-md` is the close's REAL footprint (an md
IconButton); the old `--dialog-close-size` token under-measured it → 2px gap. */
[data-dialog-content] [data-command-input] {
margin-inline-end: calc(var(--dialog-close-inset) + var(--dialog-close-size) + var(--space-2));
margin-inline-end: calc(var(--dialog-close-inset) + var(--control-height-md) + var(--space-1));
}
/* Vertically center the floating close on the boxed input row — the dialog's
default top inset (for a title row) sits it too low for the command input. */
[data-dialog-content]:has([data-command]) [data-dialog-close][data-position='top-right'] {
top: var(--space-2);
}
[data-command][data-size='sm'] {

Loading…
Cancel
Save

Powered by TurnKey Linux.