Skip to content

docs(colors): the swatch of the readable check lines up with the fields - #130

Merged
alessandrobellesia merged 1 commit into
developfrom
fix/readable-check-swatch
Oct 12, 2026
Merged

alessandrobellesia merged 1 commit into
developfrom
fix/readable-check-swatch

Conversation

@alessandrobellesia

Copy link
Copy Markdown
Member

The color swatch of the readable check, on the colors page of the documentation, sat lower than the fields next to it and was shorter than them. This PR lines it up. The package does not change.

Merge this after v0.1.31 is published (#129). Otherwise it would join the release PR, which starts from develop.

What changes

  • The cause.
    • The swatch was aligned to the end of the row, and the end of the row includes the --input-gap margin (16px) that each field keeps under its wrapper.
    • The swatch was 44px tall, where a field is --input-min-height (52px).
  • The fix. The swatch takes that margin and that height from the same tokens, so it lines up with the wrapper of the fields and stays lined up when a theme changes them.
  • Changelog. CHANGELOG.md opens a new [Unreleased] section with the entry.

Verification

  • Chrome. The swatch measures 162 to 214px, the same as the wrappers of the select and the text field. Before the fix it measured 186 to 230px.
  • Checks. stylelint, lint, build, stylelint:dist, check:colors and the styleguide build pass.
  • Not measured. Safari, and the phone width where the swatch wraps to its own line.

🤖 Generated with Claude Code

The swatch sat 16px below the select and the text field next to it and
was 8px shorter: it was aligned to the end of the row, which includes the
`--input-gap` margin each field keeps under its wrapper, and it was 44px
tall where a field is `--input-min-height`. It now takes that margin and
that height from the same tokens.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Oct 12, 2026

Copy link
Copy Markdown

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 21 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: e631546a-8150-4fc9-b4e3-80c91d3d473f

📥 Commits

Reviewing files that changed from the base of the PR and between 0741327 and ca1be68.


📒 Files selected for processing (2)
  • CHANGELOG.md
  • docs/components/ReadableCheck.vue

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@sonarqubecloud

Copy link
Copy Markdown

@alessandrobellesia
alessandrobellesia merged commit 3d4a309 into develop Oct 12, 2026
11 checks passed
@alessandrobellesia
alessandrobellesia deleted the fix/readable-check-swatch branch October 12, 2026 15:21
alessandrobellesia added a commit that referenced this pull request Oct 12, 2026
#130 reached develop before the release, so its entry moves from a new Unreleased section into 0.1.31.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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.

1 participant