Skip to content

fix(divan): size the upvote button through the button size contract - #5236

Open
tutkuofnight wants to merge 2 commits into
mainfrom
tutku/5227-divan-upvote-square
Open

fix(divan): size the upvote button through the button size contract#5236
tutkuofnight wants to merge 2 commits into
mainfrom
tutku/5227-divan-upvote-square

Conversation

@tutkuofnight

Copy link
Copy Markdown
Member

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__upvote now sets --manti-button-height, --manti-button-padding-x, min-width and padding alongside width/height, the same shape .kp-pano-post__vote-btn and .kp-sozluk-definition__vote-btn already use. Previously min-width: var(--tap-min) (36px, Button.css:7) and Manti's min-height: var(--manti-button-height) (30px at size="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 the manti-adoption.unit.test.ts idiom: it collects every static kp-* class a production <Button> carries, and fails when a rule targeting one of those classes sets a fixed px width/height without also setting min-width and --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

  • Class: scope of the AC / narrowed fix shape. Said: AC 2 offered "satisfy the 36px --tap-min floor, 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 #2166 precedent 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.
  • Class: verification weaker than the AC's letter. Said: AC 1 asks for "measured computed width == height in 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 (no getComputedStyle/toHaveCSS precedent anywhere in apps/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.

Fixes #5227

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@github-actions

github-actions Bot commented Aug 10, 2026

Copy link
Copy Markdown

🚀 Preview deployed

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>
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.

Divan upvote button renders non-square with an undersized icon

1 participant