fix(THU-587): tighten & equalize prompt-area selector/button sizing#981
Merged
darkbanjo merged 2 commits intoJun 15, 2026
Merged
Conversation
- 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
Semgrep Security ScanNo security issues found. |
|
Preview environment destroyed 🧹 Stack |
PR Metrics
Updated Mon, 15 Jun 2026 16:11:25 GMT · run #1886 |
ital0
previously approved these changes
Jun 15, 2026
- Comment described the old `--touch-height-sm` token and 32px desktop size; update to `--touch-height-control` / 28px to match the actual class.
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.
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-smalready equals--min-touch-height(40px), so shrinking mobile would break the touch target.Added a single responsive token and applied it uniformly:
Applied
h-[var(--touch-height-control)](orsize-[…]for the square buttons) to: mode picker, model picker (bordered), send/stop button, the skills+button, and pinned skill chips. Also trimmed horizontal paddingpx-2.5/px-3→px-2.Result
--min-touch-height) — unchanged, touch-safe.rounded-fullchips/+are intentional).Testing
CSS/layout-only. Typecheck/lint/format clean. Visual verification in
bun devrecommended (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-controltoken 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 useh-[var(--touch-height-control)]/size-[…]instead of--touch-height-sm. Horizontal padding is slightly reduced (px-2.5/px-3→px-2) on the affected triggers and chips.The pill model selector and other non–prompt-area uses of
--touch-height-smare unchanged.Reviewed by Cursor Bugbot for commit 144ac7b. Bugbot is set up for automated code reviews on this repo. Configure here.