Skip to content

fix(design-system): a select's label keeps a gap to its select (#317) - #329

Merged
plainprogrammer merged 10 commits into
mainfrom
076-select-label-gap
Nov 12, 2026
Merged

plainprogrammer merged 10 commits into
mainfrom
076-select-label-gap

Conversation

@plainprogrammer

Copy link
Copy Markdown
Owner

Closes #317

On number entry the "Language" label touched its select: .c-select had no gap between its name and the select, and Language is the only c-select whose name is shown (the Location and Set selects hide theirs with c-sr). One rule in the component fixes it, with a design-system token and no page rule: .c-select { display: inline-flex; align-items: center; gap: var(--space-2); }, inside the "Select inside the filter bar" block of additions.css. The touch-floor rules (spec 072, #316) are untouched.

Direct fix, no spec or plan (route confirmed by the coordinator): the evidence is docs/specs/076-select-label-gap/verification.md.

What changed

  • additions.css: the one rule above, with a comment saying why.
  • spec/system/select_label_gap_spec.rb, written first and seen red (expected 0 to be within 0.5 of 8): Language's gap equals the --space-2 token (read from the browser) at 1280px and in the 360px frame; the Location, card search Set and proxy chooser Set selects start at their label's left edge, so a hidden name put in flow would fail them.
  • FilterSelect.md, NumberEntry.md, a row in docs/specs/README.md, a lesson.

Checks

  • Every c-select use audited; there is no c-select Sort in the app.
  • Spec 072's touch-floor examples, number entry, deck rules, proxies, card search and filter-bar examples: 61 examples, 0 failures on the final code. The full suite and bin/ci ran in the pre-push hook and run again in CI.
  • Opus implementation review recorded in verification.md: SPEC-ALIGNED WITH FINDINGS (no blocking or major findings; all actionable ones taken).

Screenshots

Factory data, placeholder card images. "Before" is emulated by injecting the old behaviour as a <style>. Desktop (1280) and 360px, light and dark; all in docs/specs/076-select-label-gap/screenshots/.

Number entry's language row, desktop (the gap is 0 before and 8px after):

Light Dark
Before before light before dark
After after light after dark

Number entry at 360px:

Light Dark
Before before light before dark
After after light after dark

Card search at 360px, after (unchanged: the before and after pairs are byte-identical; the full set, with the collection page and desktop widths, is in the folder):

card search after

🤖 Generated with Claude Code

plainprogrammer and others added 10 commits November 11, 2026 21:53
#317)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…#317)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…317)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
… it uses (#317)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ow (#317)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
# Conflicts:
#	docs/specs/README.md
…ared component (#317)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@plainprogrammer
plainprogrammer marked this pull request as ready for review November 12, 2026 03:18
@plainprogrammer
plainprogrammer merged commit 1910bf1 into main Nov 12, 2026
9 checks passed
@plainprogrammer
plainprogrammer deleted the 076-select-label-gap branch November 12, 2026 03:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Number entry: the Language label touches its select

1 participant