refactor(dashboard): extract component-specific mobile rules from styles.css

Sweep 1 of the styles.css split. Rules where the desktop counterpart already
lived in a component CSS file have been moved out of the global mobile @media
block in styles.css and appended to the matching component file's mobile
block. styles.css 4551 → 4488.

Affected components: Header, AgentsView, DocumentsView, ListView, QuickChatFAB,
QuickEntryBox, ScriptsModal, TaskDetailModal, TerminalModal, WorkflowResultsTab.

Truly global mobile rules (input font-size for iOS auto-zoom, html/body
overflow, root safe-area padding, base .btn touch targets, bare element
selectors) intentionally stay in styles.css. The remaining bulk of the mobile
block (settings, auth, board/card, inline-create) cannot move yet because
their desktop rules are still in styles.css — those will fall out as part of
the cards and settings extraction sweeps.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

packages/dashboard/app/components/AgentsView.css

@@ -956,4 +956,10 @@
     height: 32px;
     align-items: center;
   }
+
+  /* Touch target for agent tree toggle */
+  .agent-tree__toggle {
+    min-width: 36px;
+    min-height: 36px;
+  }
 }

packages/dashboard/app/components/DocumentsView.css

@@ -936,5 +936,11 @@
   .document-card-key-text {
     font-size: 12px;
   }
+
+  /* Document mode toggle: ensure adequate touch target on mobile */
+  .document-mode-toggle {
+    min-width: 36px;
+    min-height: 36px;
+  }
 }
 

packages/dashboard/app/components/Header.css

@@ -843,6 +843,47 @@
     min-width: unset;
     min-height: unset;
   }
+
+  /* Touch targets for header controls */
+  .view-toggle-btn,
+  .header-search-clear {
+    min-width: 36px;
+    min-height: 36px;
+  }
+
+  /* Overflow menu and overflow split-toggle touch targets */
+  .mobile-overflow-item,
+  .mobile-overflow-split-toggle {
+    min-height: 36px;
+  }
+
+  /* Mobile header: collapsible search trigger */
+  .mobile-search-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Mobile search expanded — inside header-floating-search container */
+  .mobile-search-expanded {
+    width: 100%;
+  }
+
+  /* Mobile: compact node label, no dropdown */
+  .header-node-selector--mobile {
+    margin-right: var(--space-xs);
+    cursor: default;
+  }
+
+  .header-node-selector--mobile .node-status-indicator {
+    font-size: 11px;
+    padding: 2px var(--space-xs);
+  }
+
+  .header-node-selector--mobile .node-status-indicator__name {
+    max-width: 80px;
+    font-weight: 400;
+  }
 }
 
 @media (min-width: 769px) and (max-width: 1024px) {

packages/dashboard/app/components/ListView.css

@@ -852,5 +852,10 @@
     min-width: 140px;
     flex: 1;
   }
+
+  /* List column dropdown items: touch target on mobile */
+  .list-column-dropdown-item {
+    min-height: 36px;
+  }
 }
 

packages/dashboard/app/components/QuickChatFAB.css

@@ -711,3 +711,11 @@
 @keyframes quick-chat-cursor-blink {
   50% { opacity: 0; }
 }
+
+@media (max-width: 768px) {
+  /* Quick chat send button: touch target on mobile */
+  .quick-chat-panel-input button {
+    min-width: 36px;
+    min-height: 36px;
+  }
+}

packages/dashboard/app/components/QuickEntryBox.css

@@ -480,4 +480,12 @@
   }
 }
 
+@media (max-width: 768px) {
+  /* Quick entry toggle: touch target on mobile */
+  .quick-entry-toggle {
+    min-width: 36px;
+    min-height: 36px;
+  }
+}
+
 

packages/dashboard/app/components/ScriptsModal.css

@@ -3618,4 +3618,27 @@
     min-height: auto;
     overflow-y: auto;
   }
+
+  /* Git Manager remote edit buttons: always visible on mobile (no hover) */
+  .gm-remote-edit-btn {
+    opacity: 1;
+    width: 36px;
+    height: 36px;
+    margin-right: -8px;
+    margin-top: -8px;
+    margin-bottom: -8px;
+    border-radius: var(--radius-md);
+  }
+
+  .gm-remote-edit-btn svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* Touch targets for git manager icon buttons and activity log clear */
+  .gm-icon-btn,
+  .activity-log-clear {
+    min-width: 36px;
+    min-height: 36px;
+  }
 }

packages/dashboard/app/components/TaskDetailModal.css

@@ -1357,4 +1357,10 @@
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
+
+  /* Modal edit button: touch target on mobile */
+  .modal-edit-btn {
+    min-width: 36px;
+    min-height: 36px;
+  }
 }

packages/dashboard/app/components/TerminalModal.css

@@ -883,6 +883,12 @@
        below the visible area while xterm re-fits. */
     overflow: hidden;
   }
+
+  /* Terminal tab close button: touch target on mobile */
+  .terminal-tab-close {
+    min-width: 36px;
+    min-height: 36px;
+  }
 }
 
 

packages/dashboard/app/components/WorkflowResultsTab.css

@@ -516,3 +516,11 @@
 [data-theme="light"] .workflow-output-modal-overlay {
   background: rgba(31, 35, 40, 0.5);
 }
+
+@media (max-width: 768px) {
+  /* Workflow results edit toggle: touch target on mobile */
+  .workflow-results-edit-toggle {
+    min-width: 36px;
+    min-height: 36px;
+  }
+}

packages/dashboard/app/styles.css

@@ -4009,32 +4009,13 @@ input[type="range"]:focus-visible {
     min-height: 36px;
   }
 
-  /* Dropdown items and overflow menu actions */
+  /* Dropdown items touch target — dep-dropdown-item desktop rule lives in styles.css */
-  .dep-dropdown-item,
+  .dep-dropdown-item {
-  .mobile-overflow-item,
-  .mobile-overflow-split-toggle,
-  .list-column-dropdown-item {
     min-height: 36px;
   }
 
-  /* Small tappable controls — adequate touch sizing for mobile */
+  /* Inline create toggle: desktop rule lives in styles.css */
-  .view-toggle-btn,
+  .inline-create-toggle {
-  .header-search-clear,
-  .inline-create-toggle,
-  .quick-entry-toggle,
-  .modal-edit-btn,
-  .gm-icon-btn,
-  .activity-log-clear,
-  .terminal-tab-close,
-  .workflow-results-edit-toggle,
-  .agent-tree__toggle,
-  .quick-chat-panel-input button {
-    min-width: 36px;
-    min-height: 36px;
-  }
-
-  /* Document mode toggle: ensure adequate touch target on mobile */
-  .document-mode-toggle {
     min-width: 36px;
     min-height: 36px;
   }
@@ -4073,34 +4054,6 @@ input[type="range"]:focus-visible {
     min-width: 28px;
   }
 
-  /* Mobile header: collapsible search and overflow menu */
-  .mobile-search-trigger {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* Mobile search expanded - inside header-floating-search container */
-  .mobile-search-expanded {
-    width: 100%;
-  }
-
-  /* Mobile: compact node label, no dropdown */
-  .header-node-selector--mobile {
-    margin-right: var(--space-xs);
-    cursor: default;
-  }
-
-  .header-node-selector--mobile .node-status-indicator {
-    font-size: 11px;
-    padding: 2px var(--space-xs);
-  }
-
-  .header-node-selector--mobile .node-status-indicator__name {
-    max-width: 80px;
-    font-weight: 400;
-  }
-
   /* Modal: full-screen on mobile (cross-cutting overlay/modal base chrome) */
   .modal-overlay,
   .agent-detail-overlay,
@@ -4354,22 +4307,6 @@ input[type="range"]:focus-visible {
     height: 16px;
   }
 
-  /* Git Manager remote edit buttons: always visible on mobile (no hover) */
-  .gm-remote-edit-btn {
-    opacity: 1;
-    width: 36px;
-    height: 36px;
-    margin-right: -8px;
-    margin-top: -8px;
-    margin-bottom: -8px;
-    border-radius: var(--radius-md);
-  }
-
-  .gm-remote-edit-btn svg {
-    width: 16px;
-    height: 16px;
-  }
-
   /* Card: always show action buttons on mobile (no hover state) */
   .card-header-actions {
     gap: 4px;