feat: Improve mobile scrolling experience in autocomplete and dropdown components

apps/ui/src/components/ui/autocomplete.tsx

@@ -137,6 +137,8 @@ export function Autocomplete({
           width: Math.max(triggerWidth, 200),
         }}
         data-testid={testId ? `${testId}-list` : undefined}
+        onWheel={(e) => e.stopPropagation()}
+        onTouchMove={(e) => e.stopPropagation()}
       >
         <Command shouldFilter={false}>
           <CommandInput

apps/ui/src/components/ui/command.tsx

@@ -78,7 +78,14 @@ function CommandList({ className, ...props }: React.ComponentProps<typeof Comman
   return (
     <CommandPrimitive.List
       data-slot="command-list"
-      className={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
+      className={cn(
+        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
+        // Mobile touch scrolling support
+        'touch-pan-y overscroll-contain',
+        // iOS Safari momentum scrolling
+        '[&]:[-webkit-overflow-scrolling:touch]',
+        className
+      )}
       {...props}
     />
   );

apps/ui/src/components/views/board-view/shared/priority-selector.tsx

@@ -17,7 +17,7 @@ export function PrioritySelector({
         type="button"
         onClick={() => onPrioritySelect(1)}
         className={cn(
-          'flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors',
+          'flex-1 px-2 sm:px-3 py-2 rounded-md text-xs sm:text-sm font-medium transition-colors',
           selectedPriority === 1
             ? 'bg-red-500/20 text-red-500 border-2 border-red-500/50'
             : 'bg-muted/50 text-muted-foreground border border-border hover:bg-muted'
@@ -30,7 +30,7 @@ export function PrioritySelector({
         type="button"
         onClick={() => onPrioritySelect(2)}
         className={cn(
-          'flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors',
+          'flex-1 px-2 sm:px-3 py-2 rounded-md text-xs sm:text-sm font-medium transition-colors',
           selectedPriority === 2
             ? 'bg-yellow-500/20 text-yellow-500 border-2 border-yellow-500/50'
             : 'bg-muted/50 text-muted-foreground border border-border hover:bg-muted'
@@ -43,7 +43,7 @@ export function PrioritySelector({
         type="button"
         onClick={() => onPrioritySelect(3)}
         className={cn(
-          'flex-1 px-3 py-2 rounded-md text-sm font-medium transition-colors',
+          'flex-1 px-2 sm:px-3 py-2 rounded-md text-xs sm:text-sm font-medium transition-colors',
           selectedPriority === 3
             ? 'bg-blue-500/20 text-blue-500 border-2 border-blue-500/50'
             : 'bg-muted/50 text-muted-foreground border border-border hover:bg-muted'

apps/ui/src/components/views/settings-view/model-defaults/phase-model-selector.tsx

@@ -1195,7 +1195,9 @@ export function PhaseModelSelector({
             </div>
 
             <div className="flex items-center gap-1 ml-2">
-              {groupIsSelected && !isExpanded && <Check className="h-4 w-4 text-primary shrink-0" />}
+              {groupIsSelected && !isExpanded && (
+                <Check className="h-4 w-4 text-primary shrink-0" />
+              )}
               <ChevronRight
                 className={cn(
                   'h-4 w-4 text-muted-foreground transition-transform',
@@ -1228,7 +1230,9 @@ export function PhaseModelSelector({
                   <div className="flex flex-col items-start">
                     <span className="font-medium text-xs">{variant.label}</span>
                     {variant.description && (
-                      <span className="text-[10px] text-muted-foreground">{variant.description}</span>
+                      <span className="text-[10px] text-muted-foreground">
+                        {variant.description}
+                      </span>
                     )}
                   </div>
                   <div className="flex items-center gap-1.5">
@@ -1396,6 +1400,7 @@ export function PhaseModelSelector({
       className="w-[320px] p-0"
       align={align}
       onWheel={(e) => e.stopPropagation()}
+      onTouchMove={(e) => e.stopPropagation()}
       onPointerDownOutside={(e) => {
         // Only prevent close if clicking inside a nested popover (thinking level panel)
         const target = e.target as HTMLElement;
@@ -1408,7 +1413,7 @@ export function PhaseModelSelector({
         <CommandInput placeholder="Search models..." />
         <CommandList
           ref={commandListRef}
-          className="max-h-[300px] overflow-y-auto overscroll-contain"
+          className="max-h-[300px] overflow-y-auto overscroll-contain touch-pan-y"
         >
           <CommandEmpty>No model found.</CommandEmpty>