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

feat(FN-3308): fix CSS token consistency in settings and task detail modals

Browse Source 
Fixes CSS token consistency issues in TaskDetailModal and SettingsModal, and updates the corresponding mobile overflow test to match the refactored styles.

Fusion-Task-Id: FN-3308
This commit is contained in:
Fusion
2026-05-04 13:59:30 -07:00
committed by gsxdsm
parent bf5a0208a9
commit 88171eb5b3
13 changed files with 6442 additions and 6229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
packages/dashboard/app/components/SettingsModal.css
View File

@@ -288,7 +288,7 @@
background: none;
border: none;
border-left: 3px solid transparent;
border-radius: 0 var(--radius) var(--radius) 0;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
cursor: pointer;
text-align: left;
transition:
@@ -458,7 +458,7 @@
padding: var(--space-sm) var(--space-xl);
margin: 0 var(--space-xl) var(--space-xs);
font-size: 12px;
border-radius: var(--radius);
border-radius: var(--radius-md);
color: var(--text-muted);
}
.settings-scope-global {
@@ -1143,10 +1143,10 @@
}
.auth-section-hint {
padding: 12px 16px;
padding: var(--space-md) var(--space-lg);
margin-bottom: 12px;
background: var(--bg-tertiary);
border-radius: var(--radius);
border-radius: var(--radius-md);
font-size: 13px;
color: var(--text-muted);
border-left: 3px solid var(--text-muted);
@@ -1302,6 +1302,33 @@
margin-block: 0 var(--space-md);
line-height: 1.5;
}
.settings-token-cap-row {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.settings-model-lane-label-row {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-xs);
}
.settings-model-lane-control-row {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.settings-model-lane-control-main {
flex: 1;
}
.settings-summarization-actions {
justify-content: flex-start;
}
/* === Settings: Model Presets === */
.settings-model-presets {
display: flex;
@@ -1439,7 +1466,7 @@
gap: 4px;
border-left: none;
border-bottom: 2px solid transparent;
border-radius: var(--radius) var(--radius) 0 0;
border-radius: var(--radius-md) var(--radius-md) 0 0;
padding: 6px 12px;
white-space: nowrap;
}
@@ -1555,7 +1582,7 @@
.auth-provider-row {
flex-wrap: wrap;
padding: 12px 14px;
padding: var(--space-md) calc(var(--space-md) + var(--space-xs) / 2);
gap: var(--space-sm);
}

10
packages/dashboard/app/components/SettingsModal.tsx
View File

@@ -2273,7 +2273,7 @@ export function SettingsModal({
<h4 className="settings-section-heading">Token Cap</h4>
<div className="form-group">
<label htmlFor="tokenCap">Token Cap</label>
<div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
<div className="settings-token-cap-row">
<input
id="tokenCap"
type="number"
@@ -2322,7 +2322,7 @@ export function SettingsModal({
return (
<div className="form-group" key={lane.laneId}>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.25rem" }}>
<div className="settings-model-lane-label-row">
<label htmlFor={`${lane.laneId}Model`}>{laneLabel}</label>
<span
className={`settings-lane-badge ${isOverridden ? "settings-lane-badge--override" : "settings-lane-badge--inherited"}`}
@@ -2331,8 +2331,8 @@ export function SettingsModal({
{isOverridden ? "Override (Project)" : "Inherited (Global)"}
</span>
</div>
<div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
<div style={{ flex: 1 }}>
<div className="settings-model-lane-control-row">
<div className="settings-model-lane-control-main">
<CustomModelDropdown
id={`${lane.laneId}Model`}
label={laneLabel}
@@ -2739,7 +2739,7 @@ export function SettingsModal({
</div>
<div className="form-group">
<div className="modal-actions" style={{ justifyContent: "flex-start" }}>
<div className="modal-actions settings-summarization-actions">
<button
type="button"
className="btn btn-sm"

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

@@ -60,7 +60,7 @@
}
.detail-body {
padding: 20px;
padding: calc(var(--space-lg) + var(--space-xs));
overflow-x: hidden;
overflow-y: auto;
scrollbar-color: var(--border) transparent;
@@ -209,7 +209,7 @@
align-items: flex-start;
gap: var(--space-md);
margin: var(--space-md) 0 var(--space-lg);
padding: 12px 14px;
padding: var(--space-md) calc(var(--space-md) + var(--space-xs) / 2);
background: color-mix(in srgb, var(--color-error-dark) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--color-error-dark) 30%, transparent);
border-radius: var(--radius-md);
@@ -254,6 +254,11 @@
gap: var(--space-xs);
}
.detail-meta-label-icon {
vertical-align: middle;
margin-right: var(--space-xs);
}
.detail-source-section {
border: 1px solid var(--border);
border-radius: var(--radius-md);
@@ -1172,7 +1177,7 @@
}
.detail-prompt {
padding: 14px;
padding: calc(var(--space-md) + var(--space-xs) / 2);
font-size: 13px;
line-height: 1.6;
font-family: var(--font-mono);
@@ -1182,7 +1187,7 @@
}
.spec-loading {
padding: 14px;
padding: calc(var(--space-md) + var(--space-xs) / 2);
font-size: 13px;
color: var(--text-muted);
display: flex;
@@ -1240,7 +1245,9 @@
border-radius: var(--radius-sm);
color: var(--text-muted);
cursor: pointer;
transition: all 0.15s;
transition:
background var(--transition-fast),
color var(--transition-fast);
}
.modal-edit-btn:hover {
@@ -1444,7 +1451,7 @@
}
.detail-body {
padding: 14px;
padding: calc(var(--space-md) + var(--space-xs) / 2);
overflow-x: hidden;
overflow-y: auto;
}
@@ -1456,7 +1463,7 @@
.modal-actions {
flex-wrap: wrap;
gap: var(--space-sm);
padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
padding: var(--space-md) calc(var(--space-md) + var(--space-xs) / 2) calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
}
.modal-actions .btn {
@@ -1474,7 +1481,7 @@
}
.modal-header {
padding: 12px 14px;
padding: var(--space-md) calc(var(--space-md) + var(--space-xs) / 2);
}
.detail-tabs {

2
packages/dashboard/app/components/TaskDetailModal.tsx
View File

@@ -2080,7 +2080,7 @@ export function TaskDetailContent({
</span>
)}
<span className="detail-meta-label">
<Bot size={14} style={{ verticalAlign: "middle", marginRight: 6 }} />
<Bot size={14} className="detail-meta-label-icon" />
Agent
</span>
</div>