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

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

packages/dashboard/app/__tests__/detail-body-mobile-overflow.test.ts

@@ -32,7 +32,7 @@ describe("detail-body mobile overflow (FN-1331)", () => {
     expect(rule).toContain("overflow-y: auto");
   });
 
-  it("mobile .detail-body rule preserves padding: 14px", () => {
+  it("mobile .detail-body rule uses tokenized 14px-equivalent padding", () => {
     const detailModalCss = readFileSync(
       resolve(__dirname, "../components/TaskDetailModal.css"),
       "utf-8",
@@ -43,6 +43,8 @@ describe("detail-body mobile overflow (FN-1331)", () => {
 
     const detailBodyMatch = mobileBlock.match(/\.detail-body\s*\{[^}]*\}/s);
     expect(detailBodyMatch).toBeTruthy();
-    expect(detailBodyMatch![0]).toContain("padding: 14px");
+    expect(detailBodyMatch![0]).toContain(
+      "padding: calc(var(--space-md) + var(--space-xs) / 2);",
+    );
   });
 });

packages/dashboard/app/components/SettingsModal.css

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

packages/dashboard/app/components/SettingsModal.tsx

@@ -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"

packages/dashboard/app/components/TaskDetailModal.css

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

packages/dashboard/app/components/TaskDetailModal.tsx

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