fix(ui-ux): grow citation chip to a 24px touch target

[seonghobae]

Gap

Dimension: touch_interaction
Severity: medium

.citation-chip (the Ask/Chat evidence citation button rendered by
ChatCitations / CitationChip.tsx) renders ~19px tall on mobile, below
the 24px minimum touch target.

Evidence (frontend/src/App.css):

.citation-chip {
  border: 1px solid var(--color-chip-border);
  border-radius: var(--radius-chip);
  padding: var(--space-chip-block) var(--space-chip-inline);
  margin-right: var(--space-chip-gap);
  background: none;
  cursor: pointer;
  font-family: var(--font-family-chip);
  color: var(--text);
}

No min-height/min-width, and --space-chip-block is 0.1rem
(frontend/src/styles/tokens.css:83) — unlike .language-switcher select
and .lineage-entity-picker select, which already add
min-height: var(--size-control-min).

Fix

Added to .citation-chip:

display: inline-flex;
align-items: center;
min-height: var(--size-control-min);

min-height mirrors the existing convention (11 other rules in
App.css already use var(--size-control-min), e.g. .language-switcher select, .lineage-entity-picker select). display: inline-flex; align-items: center; is needed because .citation-chip is a bare <button>, so its text
would otherwise sit at the top of the taller box once min-height applies.

No hardcoded sizes/colors — reused the existing --size-control-min token.
Did not bump --space-chip-gap (mentioned as optional in the gap report,
not required to close the core gap — YAGNI).

Test

Added a regression test in frontend/src/styles/tokens.test.ts (extends
the file's existing pattern of reading App.css as text and asserting on
CSS rule content, since jsdom doesn't apply real layout/CSS in this repo's
Vitest config) that extracts the .citation-chip rule and asserts
min-height: var(--size-control-min), display: inline-flex, and
align-items: center are present. Confirmed red before the fix / green
after.

Checks (run from frontend/)

• corepack pnpm exec vitest run src/styles/tokens.test.ts src/components/CitationChip.test.tsx → 5 passed (2 files)
• corepack pnpm exec oxlint src/App.css src/styles/tokens.test.ts src/components/CitationChip.tsx src/components/CitationChip.test.tsx → clean, no output
• corepack pnpm exec tsc -b → 2 pre-existing errors in src/App.tsx (unused import at line 104, AdminPanel accessToken type mismatch at line 4623), unrelated to this change and unrelated to App.css/tokens.test.ts. Confirmed via git diff that App.tsx is untouched by this PR, and these errors reproduce identically against a pristine origin/main checkout.

🤖 Generated with Claude Code

https://claude.ai/code/session_011jWJzKUd82yy97esEBfJbt

---

[coderabbitai]

Warning

Review limit reached

Next included review available in 53 minutes.

View limit details

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

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

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 2043f994-8609-4965-9f21-5cc561e2ff07

📥 Commits

Reviewing files that changed from the base of the PR and between b4911f8 and 23cfb1f.

📒 Files selected for processing (2)

• frontend/src/App.css
• frontend/src/styles/tokens.test.ts

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.