root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
gsxdsm
2026-04-25 08:43:54 -07:00
parent bff40c07b9
commit cc8aa1f780
11 changed files with 121 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/dashboard/app/components/AgentsView.css
View File

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

6
packages/dashboard/app/components/DocumentsView.css
View File

@@ -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;
}
}

41
packages/dashboard/app/components/Header.css
View File

@@ -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) {

5
packages/dashboard/app/components/ListView.css
View File

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

8
packages/dashboard/app/components/QuickChatFAB.css
View File

@@ -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;
}
}

8
packages/dashboard/app/components/QuickEntryBox.css
View File

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

23
packages/dashboard/app/components/ScriptsModal.css
View File

@@ -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;
}
}

6
packages/dashboard/app/components/TaskDetailModal.css
View File

@@ -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;
}
}

6
packages/dashboard/app/components/TerminalModal.css
View File

@@ -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;
}
}

8
packages/dashboard/app/components/WorkflowResultsTab.css
View File

@@ -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;
}
}

71
packages/dashboard/app/styles.css
View File

@@ -4009,32 +4009,13 @@ input[type="range"]:focus-visible {
min-height: 36px;
}
/* Dropdown items and overflow menu actions */
.dep-dropdown-item,
.mobile-overflow-item,
.mobile-overflow-split-toggle,
.list-column-dropdown-item {
/* Dropdown items touch target — dep-dropdown-item desktop rule lives in styles.css */
.dep-dropdown-item {
min-height: 36px;
}
/* Small tappable controls — adequate touch sizing for mobile */
.view-toggle-btn,
.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 {
/* Inline create toggle: desktop rule lives in styles.css */
.inline-create-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;