Fix oversized toggle switches on mobile

The global @media (pointer: coarse) rule was forcing min-height: 44px on
toggle button elements, inflating them from 20px to 44px. Added
data-slot="toggle" to all 10 toggle buttons and a CSS override to reset
their min-height, keeping the parent row as the touch target.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/components/NewIssueDialog.tsx

@@ -1213,6 +1213,7 @@ export function NewIssueDialog() {
                   <div className="flex items-center justify-between rounded-md border border-border px-2 py-1.5">
                     <div className="text-xs text-muted-foreground">Enable Chrome (--chrome)</div>
                     <button
+                      data-slot="toggle"
                       className={cn(
                         "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
                         assigneeChrome ? "bg-green-600" : "bg-muted"

ui/src/components/ProjectProperties.tsx

@@ -887,6 +887,7 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
                   </div>
                   {onUpdate || onFieldUpdate ? (
                     <button
+                      data-slot="toggle"
                       className={cn(
                         "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
                         executionWorkspacesEnabled ? "bg-green-600" : "bg-muted",
@@ -925,6 +926,7 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
                         </div>
                       </div>
                       <button
+                        data-slot="toggle"
                         className={cn(
                           "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
                           executionWorkspaceDefaultMode === "isolated_workspace" ? "bg-green-600" : "bg-muted",

ui/src/components/agent-config-primitives.tsx

@@ -117,6 +117,7 @@ export function ToggleField({
         {hint && <HintIcon text={hint} />}
       </div>
       <button
+        data-slot="toggle"
         className={cn(
           "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
           checked ? "bg-green-600" : "bg-muted"
@@ -165,6 +166,7 @@ export function ToggleWithNumber({
           {hint && <HintIcon text={hint} />}
         </div>
         <button
+          data-slot="toggle"
           className={cn(
             "relative inline-flex h-5 w-9 items-center rounded-full transition-colors shrink-0",
             checked ? "bg-green-600" : "bg-muted"

ui/src/index.css

@@ -153,6 +153,10 @@
   [data-slot="select-trigger"] {
     min-height: 44px;
   }
+
+  [data-slot="toggle"] {
+    min-height: 0;
+  }
 }
 
 /* Dark mode scrollbars */

ui/src/pages/AgentDetail.tsx

@@ -1513,6 +1513,7 @@ function ConfigurationTab({
             <button
               type="button"
               role="switch"
+              data-slot="toggle"
               aria-checked={canCreateAgents}
               className={cn(
                 "relative inline-flex h-5 w-9 items-center rounded-full transition-colors shrink-0 disabled:cursor-not-allowed disabled:opacity-50",
@@ -1544,6 +1545,7 @@ function ConfigurationTab({
             <button
               type="button"
               role="switch"
+              data-slot="toggle"
               aria-checked={canAssignTasks}
               className={cn(
                 "relative inline-flex h-5 w-9 items-center rounded-full transition-colors shrink-0 disabled:cursor-not-allowed disabled:opacity-50",

ui/src/pages/InstanceExperimentalSettings.tsx

@@ -84,6 +84,7 @@ export function InstanceExperimentalSettings() {
           </div>
           <button
             type="button"
+            data-slot="toggle"
             aria-label="Toggle isolated workspaces experimental setting"
             disabled={toggleMutation.isPending}
             className={cn(
@@ -113,6 +114,7 @@ export function InstanceExperimentalSettings() {
           </div>
           <button
             type="button"
+            data-slot="toggle"
             aria-label="Toggle guarded dev-server auto-restart"
             disabled={toggleMutation.isPending}
             className={cn(

ui/src/pages/InstanceGeneralSettings.tsx

@@ -81,6 +81,7 @@ export function InstanceGeneralSettings() {
           </div>
           <button
             type="button"
+            data-slot="toggle"
             aria-label="Toggle username log censoring"
             disabled={toggleMutation.isPending}
             className={cn(