fix(divan): size the upvote button through the button size contract - #5236
Open
tutkuofnight wants to merge 2 commits into
Open
fix(divan): size the upvote button through the button size contract#5236tutkuofnight wants to merge 2 commits into
tutkuofnight wants to merge 2 commits into
Conversation
Fixes #5227 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
🚀 Preview deployed
|
5 tasks
The four 28px literals tripped design-token-guard's raw-px ceiling for Divan.css (11 → 13). One `--vote-size` declaration, referenced by the three box properties, lands the file at 10 — the same shape `.kp-sozluk-definition__vote-btn` uses with `--vote-w`. The guard test's predicate widens with it: a definite box is now both axes at a non-percentage length, so a var-valued square is still covered. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This was referenced Aug 10, 2026
Open
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The upvote button on the divan çaylak-detail page looked like a slightly squashed rectangle instead of the square it was meant to be, which also made its triangle icon read as undersized. The CSS did declare a 28×28 square, but two larger floors from the shared button styles quietly overrode it. This sets the size through the button's own contract so the declared box is the box that renders, and adds a test so the same override can't silently lose again.
Fixes #5227
What changed
apps/web/src/components/divan/Divan.css—.kp-divan__upvotenow sets--manti-button-height,--manti-button-padding-x,min-widthandpaddingalongsidewidth/height, the same shape.kp-pano-post__vote-btnand.kp-sozluk-definition__vote-btnalready use. Previouslymin-width: var(--tap-min)(36px,Button.css:7) and Manti'smin-height: var(--manti-button-height)(30px atsize="sm") outranked the bare 28px declarations, so the control laid out at ≥36×30.apps/web/src/components/ui/button-size-contract.unit.test.ts— a source-scanning guard in themanti-adoption.unit.test.tsidiom: it collects every statickp-*class a production<Button>carries, and fails when a rule targeting one of those classes sets a fixed pxwidth/heightwithout also settingmin-widthand--manti-button-height. It carries a zero-scope assertion (ADR 0092) so an empty scan can't pass silently. Reverting the CSS fix makes it fail on.kp-divan__upvote— verified.The icon is unchanged at 16px: ADR 0240 rules that an icon-only control (no visible label) stays at ≥16 whatever its host's height, so 12/14 is not available here. With the box now a true 28×28 the glyph fills it at the same ratio as the pano and sözlük vote buttons, which is where the "icon looks small" reading came from.
Deviations
--tap-minfloor, or record the deviation with an explicit rationale", and the triage note called growing to 36px the low-risk default. Did: kept the 28px box and took the second branch — an inline note at the enforcement site citing WCAG 2.5.8's 24px target and the#2166precedent the two sibling vote buttons already run under. Why: the divan row is a dense vote control of the same class as the pano (24px) and sözlük (26px) vote buttons; growing only this one to 36px would make it the outlier among three sibling surfaces and change the row's rhythm, which is not what the issue reported. Disposition: for the reviewer to judge — if the design call is that all three should reach the tap floor, that is one change across three surfaces, not this one.width == heightin the browser, not merely declared in CSS". Did: verified the box is square by CSS reasoning (every floor now equals 28px) plus the source-level guard test above; there is no computed-style or browser-metric test tier in this repo (nogetComputedStyle/toHaveCSSprecedent anywhere inapps/web/tests), and the divan surface is mod-gated so an e2e assertion would need an actor fixture. Why: adding a browser-metrics tier for one assertion is disproportionate to the fix. Disposition: for the reviewer to judge; the guard test enforces the invariant that made the box non-square, which is the part that can regress.