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

fix(FN-2236): standardize settings pane heading spacing

Browse Source 
- Replace inline heading margin styles in SettingsModal with reusable settings-section-heading--spaced class
- Tokenize settings pane horizontal spacing and margins in styles.css
- Add symmetric gutters so section headings align consistently across the settings modal
This commit is contained in:
Fusion
2026-04-23 02:50:17 -07:00
committed by gsxdsm
parent 4a78fe0990
commit e97cbabfd5
2 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1159,7 +1159,7 @@ export function SettingsModal({
{availableModels.length > 0 && (
<>
<h4 className="settings-section-heading" style={{ marginTop: "1.5rem" }}>Model Lanes</h4>
<h4 className="settings-section-heading settings-section-heading--spaced">Model Lanes</h4>
<p className="settings-description">
Global baseline models for each AI role. Project settings can override these per-project.
</p>
@@ -1207,7 +1207,7 @@ export function SettingsModal({
)}
{/* --- OpenRouter Model Sync --- */}
<h4 className="settings-section-heading" style={{ marginTop: "1.5rem" }}>OpenRouter Models</h4>
<h4 className="settings-section-heading settings-section-heading--spaced">OpenRouter Models</h4>
<div className="form-group">
<label htmlFor="openrouterModelSync" className="checkbox-label">
<input
@@ -1274,7 +1274,7 @@ export function SettingsModal({
</div>
{/* --- Project Model Lanes --- */}
<h4 className="settings-section-heading" style={{ marginTop: "1.5rem" }}>Model Lanes</h4>
<h4 className="settings-section-heading settings-section-heading--spaced">Model Lanes</h4>
<p className="settings-description">
Override global model settings at the project level. Each lane controls a specific AI usage context.
Unset lanes inherit from the corresponding global lane.
@@ -1340,7 +1340,7 @@ export function SettingsModal({
)}
{/* --- Fallback Models --- */}
<h4 className="settings-section-heading" style={{ marginTop: "1.5rem" }}>Fallback Models</h4>
<h4 className="settings-section-heading settings-section-heading--spaced">Fallback Models</h4>
{modelsLoading ? (
<div className="settings-empty-state">Loading available models…</div>
) : availableModels.length === 0 ? (
@@ -1407,7 +1407,7 @@ export function SettingsModal({
)}
{/* --- Model Presets --- */}
<h4 className="settings-section-heading" style={{ marginTop: "1.5rem" }}>Model Presets</h4>
<h4 className="settings-section-heading settings-section-heading--spaced">Model Presets</h4>
<div className="form-group">
<label>Configured presets</label>
{presets.length === 0 ? (
@@ -1600,7 +1600,7 @@ export function SettingsModal({
) : null}
{/* --- AI Summarization --- */}
<h4 className="settings-section-heading" style={{ marginTop: "1.5rem" }}>AI Summarization</h4>
<h4 className="settings-section-heading settings-section-heading--spaced">AI Summarization</h4>
<div className="form-group">
<label htmlFor="autoSummarizeTitles" className="checkbox-label">
<input

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

@@ -3574,13 +3574,18 @@ input[type="range"]:focus-visible {
.settings-section-heading {
font-size: 14px;
font-weight: 600;
padding: 12px 20px 10px;
margin: 0 20px 0 0;
padding: var(--space-lg) var(--space-xl) var(--space-md);
margin: 0 var(--space-xl) 0;
color: var(--text);
border-bottom: 1px solid var(--border);
margin-bottom: var(--space-xs);
}
/* Spacing modifier for settings-section-heading that need extra top margin */
.settings-section-heading--spaced {
margin-top: var(--space-xl);
}
/* Scope indicators in sidebar nav items */
.settings-scope-icon {
margin-right: 6px;
@@ -3594,8 +3599,8 @@ input[type="range"]:focus-visible {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 8px 20px;
margin: 0 0 4px 0;
padding: var(--space-sm) var(--space-xl);
margin: 0 var(--space-xl) var(--space-xs);
font-size: 12px;
border-radius: var(--radius);
color: var(--text-muted);
@@ -7288,8 +7293,8 @@ input[type="range"]:focus-visible {
}
.settings-section-heading {
padding: 12px 14px 10px;
margin-right: 14px;
padding: var(--space-lg) var(--space-lg) var(--space-md);
margin: 0 var(--space-lg) 0;
}
.form-group {
@@ -7297,7 +7302,7 @@ input[type="range"]:focus-visible {
}
.settings-scope-banner {
padding: 8px 14px;
padding: var(--space-sm) var(--space-lg);
}
.settings-empty-state {
@@ -7327,7 +7332,7 @@ input[type="range"]:focus-visible {
}
.settings-description {
padding: 0 14px;
padding: 0 var(--space-lg);
}
.theme-selector {