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

feat(FN-2649): add themed scrollbar styles in task detail modal

Browse Source 
- Add token-based scrollbar styling for .detail-body across Firefox and WebKit pseudo-elements
- Scope agent log scrollbar rules to .detail-section--agent-log .agent-log-viewer-scroll to avoid selector target drift
- Add TaskDetailModal CSS regression tests that assert scrollbar declarations for modal body and agent log containers
- Introduce shared test helpers for robust selector/declaration matching in stylesheet assertions
This commit is contained in:
Fusion
2026-04-27 03:47:09 -07:00
committed by gsxdsm
parent cd9190c08d
commit 00239149ab
2 changed files with 68 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,9 +45,28 @@
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
scrollbar-color: var(--border) transparent;
scrollbar-width: thin;
flex: 1;
}
.detail-body::-webkit-scrollbar {
width: 6px;
}
.detail-body::-webkit-scrollbar-track {
background: transparent;
}
.detail-body::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: var(--radius-sm);
}
.detail-body::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
/* When the Agent Log tab is active, switch to flex layout so the log section
can stretch to fill the remaining space above the action bar.
The detail-body itself should NOT scroll; the agent-log-viewer scrolls instead. */
@@ -241,11 +260,13 @@
overflow: hidden;
}
.agent-log-viewer-scroll {
.detail-section--agent-log .agent-log-viewer-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-color: var(--border) transparent;
scrollbar-width: thin;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.5;
@@ -256,6 +277,23 @@
overflow-wrap: break-word;
}
.detail-section--agent-log .agent-log-viewer-scroll::-webkit-scrollbar {
width: 6px;
}
.detail-section--agent-log .agent-log-viewer-scroll::-webkit-scrollbar-track {
background: transparent;
}
.detail-section--agent-log .agent-log-viewer-scroll::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: var(--radius-sm);
}
.detail-section--agent-log .agent-log-viewer-scroll::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
.agent-log-model-header {
display: flex;
flex-wrap: wrap;