Skip to content

fix(THU-587): tighten & equalize prompt-area selector/button sizing#981

Merged
darkbanjo merged 2 commits into
mainfrom
jkab/thu-587-prompt-area-tighten-and-equalize-selectorbutton-sizing
Jun 15, 2026
Merged

fix(THU-587): tighten & equalize prompt-area selector/button sizing#981
darkbanjo merged 2 commits into
mainfrom
jkab/thu-587-prompt-area-tighten-and-equalize-selectorbutton-sizing

Conversation

@darkbanjo

@darkbanjo darkbanjo commented Jun 12, 2026

Copy link
Copy Markdown
Collaborator

What

Tightens the prompt-area selectors/buttons so they're a touch smaller and all share one height, while staying ≥ the mobile touch minimum.

Approach

Most of these controls already shared --touch-height-sm (40px mobile / 32px desktop). The lever for "a tad smaller" is desktop only — on mobile --touch-height-sm already equals --min-touch-height (40px), so shrinking mobile would break the touch target.

Added a single responsive token and applied it uniformly:

--touch-height-control: 2.5rem;  /* 40px mobile — held at --min-touch-height */
--touch-height-control: 1.75rem; /* 28px desktop — tightened */

Applied h-[var(--touch-height-control)] (or size-[…] for the square buttons) to: mode picker, model picker (bordered), send/stop button, the skills + button, and pinned skill chips. Also trimmed horizontal padding px-2.5/px-3px-2.

Result

  • Mobile: 40px (= --min-touch-height) — unchanged, touch-safe.
  • Desktop: 32 → 28px + tighter padding → visibly tighter, all controls identical height.
  • Border-radius and font sizes left as-is (out of scope; the rounded-full chips/+ are intentional).

Testing

CSS/layout-only. Typecheck/lint/format clean. Visual verification in bun dev recommended (web + a mobile-width check at the 768px breakpoint).

🤖 Generated with Claude Code


Note

Low Risk
CSS-only sizing and padding in the chat composer; no logic, auth, or data changes.

Overview
Introduces a shared --touch-height-control token so prompt-area controls share one height: 40px on mobile (unchanged, still at the touch minimum) and 28px on desktop (down from 32px via the old --touch-height-sm).

Mode selector, bordered model selector, send/stop buttons, the skills + button, and pinned skill chips now use h-[var(--touch-height-control)] / size-[…] instead of --touch-height-sm. Horizontal padding is slightly reduced (px-2.5/px-3px-2) on the affected triggers and chips.

The pill model selector and other non–prompt-area uses of --touch-height-sm are unchanged.

Reviewed by Cursor Bugbot for commit 144ac7b. Bugbot is set up for automated code reviews on this repo. Configure here.

- add a dedicated --touch-height-control token (40px mobile / 28px desktop)
  so prompt-area controls share one consistent height
- apply it to mode/model selectors, pin-skill button, suggestion chips, and
  the send/stop buttons, and trim their horizontal padding to match
@github-actions

Copy link
Copy Markdown

Semgrep Security Scan

No security issues found.

@github-actions

github-actions Bot commented Jun 12, 2026

Copy link
Copy Markdown

Preview environment destroyed 🧹

Stack preview-pr-981 and its Cloudflare subdomain have been cleaned up.

@github-actions

github-actions Bot commented Jun 12, 2026

Copy link
Copy Markdown

PR Metrics

Metric Value
Lines changed (prod code) +9 / -7
JS bundle size (gzipped) 🟢 737.6 KB → 737.4 KB (-183 B, -0.0%)
Test coverage 🟢 78.13% → 78.13% (+0.0%)
Performance (preview) Preview not ready — Render deploy may have timed out
Accessibility
Best Practices
SEO

Updated Mon, 15 Jun 2026 16:11:25 GMT · run #1886

ital0
ital0 previously approved these changes Jun 15, 2026
Comment thread src/skills/suggestion-chip.tsx
- Comment described the old `--touch-height-sm` token and 32px desktop
  size; update to `--touch-height-control` / 28px to match the actual class.
@darkbanjo darkbanjo merged commit 922f614 into main Jun 15, 2026
23 of 24 checks passed
@darkbanjo darkbanjo deleted the jkab/thu-587-prompt-area-tighten-and-equalize-selectorbutton-sizing branch June 15, 2026 16:08
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.

2 participants