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

src/components/chat/chat-skills-bar.tsx

@@ -156,7 +156,7 @@ export const ChatSkillsBar = ({
                   size="icon-sm"
                   aria-label="Pin a skill"
                   disabled={addDisabled}
-                  className={`shrink-0 cursor-pointer rounded-full bg-card transition-opacity disabled:cursor-not-allowed disabled:opacity-40 ${
+                  className={`size-[var(--touch-height-control)] shrink-0 cursor-pointer rounded-full bg-card transition-opacity disabled:cursor-not-allowed disabled:opacity-40 ${
                     openChipId ? 'opacity-40' : ''
                   }`}
                 >

src/components/ui/mode-selector/mode-selector.tsx

@@ -54,7 +54,7 @@ export const ModeSelector = ({ modes, selectedMode, onModeChange, iconOnly = fal
     <div
       className={cn(
         'flex items-center rounded-lg cursor-pointer transition-colors text-[length:var(--font-size-sm)] border border-border',
-        iconOnly ? 'size-[var(--touch-height-sm)] justify-center' : 'gap-1.5 px-2.5 h-[var(--touch-height-sm)]',
+        iconOnly ? 'size-[var(--touch-height-control)] justify-center' : 'gap-1.5 px-2 h-[var(--touch-height-control)]',
         isOpen ? 'bg-accent' : 'hover:bg-accent/50',
       )}
     >

src/components/ui/model-selector/model-selector.tsx

@@ -127,7 +127,7 @@ export const ModelSelector = ({
         'flex items-center cursor-pointer transition-colors',
         variant === 'bordered'
           ? cn(
-              'gap-1.5 px-2.5 h-[var(--touch-height-sm)] rounded-lg border border-border text-[length:var(--font-size-sm)]',
+              'gap-1.5 px-2 h-[var(--touch-height-control)] rounded-lg border border-border text-[length:var(--font-size-sm)]',
               isOpen ? 'bg-accent' : 'hover:bg-accent/50',
             )
           : cn(

src/components/ui/prompt-input.tsx

@@ -130,7 +130,7 @@ export const PromptInput = forwardRef<HTMLFormElement, PromptInputProps>(
         <Button
           type="button"
           variant="default"
-          className="size-[var(--touch-height-sm)] rounded-lg flex items-center justify-center flex-shrink-0"
+          className="size-[var(--touch-height-control)] rounded-lg flex items-center justify-center flex-shrink-0"
           onClick={onStop}
         >
           <Square className="size-[var(--icon-size-default)]" />
@@ -139,7 +139,7 @@ export const PromptInput = forwardRef<HTMLFormElement, PromptInputProps>(
         <Button
           type="submit"
           variant="default"
-          className="size-[var(--touch-height-sm)] rounded-lg flex items-center justify-center flex-shrink-0"
+          className="size-[var(--touch-height-control)] rounded-lg flex items-center justify-center flex-shrink-0"
           disabled={isLoading || !value.trim()}
         >
           <ArrowUp className="size-[var(--icon-size-default)]" />

src/index.css

@@ -60,6 +60,7 @@
   --touch-height-lg: 3rem; /* 48px mobile */
   --touch-height-default: 2.75rem; /* 44px mobile - primary touch target */
   --touch-height-sm: 2.5rem; /* 40px mobile */
+  --touch-height-control: 2.5rem; /* 40px mobile — prompt-area selectors/buttons; held at --min-touch-height */
 
   /* Icon sizes */
   --icon-size-default: 1.25rem; /* 20px mobile */
@@ -94,6 +95,7 @@
     --touch-height-lg: 2.5rem; /* 40px desktop */
     --touch-height-default: 2.25rem; /* 36px desktop */
     --touch-height-sm: 2rem; /* 32px desktop */
+    --touch-height-control: 1.75rem; /* 28px desktop — tightened prompt-area controls (THU-587) */
 
     /* Icon sizes */
     --icon-size-default: 1rem; /* 16px desktop */

src/skills/suggestion-chip.tsx

@@ -107,7 +107,7 @@ export const SuggestionChip = ({
             clearLongPress()
             handleOpenChange(true)
           }}
-          // `h-[var(--touch-height-sm)]` resolves to 40px on mobile, 32px on
+          // `h-[var(--touch-height-control)]` resolves to 40px on mobile, 28px on
           // desktop — keeps the compact desktop look while meeting the
           // 40px-min touch target the rest of the app uses on touch devices.
           //
@@ -117,7 +117,7 @@ export const SuggestionChip = ({
           // share/copy callout pops) while our long-press timer is waiting
           // to open the action menu. Leaving `touch-action` at its default
           // so the chip strip's horizontal scroll on mobile still works.
-          className={`h-[var(--touch-height-sm)] shrink-0 cursor-pointer select-none rounded-full bg-card px-3 text-sm font-normal transition-opacity [-webkit-touch-callout:none] ${
+          className={`h-[var(--touch-height-control)] shrink-0 cursor-pointer select-none rounded-full bg-card px-2 text-sm font-normal transition-opacity [-webkit-touch-callout:none] ${
             dimmed ? 'opacity-40' : ''
           }`}
           aria-label={`Pinned skill /${label}`}