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

FN-7785: reduce margin and padding across mobile Settings pages

Browse Source 
Tightens spacing on the Settings modal's mobile (≤768px) layout so pages feel less loose on narrow viewports, and updates mobile settings tests to match.

- Reduce .settings-content scroll container padding and cut section-heading/margin/padding tokens from --space-lg/--space-md down to --space-sm across settings-note, remote-status-bar, remote-share-block, remote-cli-detection, remote-external-tunnel-panel, notification-provider-card, settings-scope-banner, memory-file-summary, settings-description, auth-* rows/cards/hints, and settings-preset-* controls
- Add tighter padding for settings-empty-state and theme-selector, and restructure settings-model-lane-actions spacing (margin-block + padding)
- Update settings-mobile.test.tsx assertions to reflect the new compact spacing values
- Add changeset (patch) documenting the mobile Settings spacing fix

Files changed:
 .changeset/fn-7785-mobile-settings-spacing.md      |  7 +++
 .../dashboard/app/components/SettingsModal.css     | 73 +++++++++++++---------
 .../components/__tests__/settings-mobile.test.tsx  | 43 +++++++++----
 3 files changed, 82 insertions(+), 41 deletions(-)

Fusion-Task-Id: FN-7785

Fusion-Task-Lineage: ca9332ea-782d-41de-ba51-010caea9489e

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
gsxdsm
2026-07-10 08:26:41 -07:00
parent 59a798bc0d
commit 4d4e9ad5cb
3 changed files with 81 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.changeset/fn-7785-mobile-settings-spacing.md Normal file
View File

@@ -0,0 +1,7 @@
---
"@runfusion/fusion": patch
---
summary: Tighten margins and padding across all mobile Settings pages for a more compact layout.
category: fix
dev: SettingsModal mobile (≤768px) CSS only — reduced .settings-content and interior section spacing; desktop/tablet unchanged.

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

@@ -1565,7 +1565,7 @@ Design tokens only (spacing/radius/color vars), no hardcoded px besides 0.
@media (max-width: 768px) { @media (max-width: 768px) {
.settings-note { .settings-note {
padding: 0 var(--space-lg); padding: 0 var(--space-sm);
} }
.settings-overlap-ignore-row { .settings-overlap-ignore-row {
@@ -1590,11 +1590,11 @@ Design tokens only (spacing/radius/color vars), no hardcoded px besides 0.
.remote-status-bar { .remote-status-bar {
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 var(--space-lg) var(--space-md); margin: 0 var(--space-sm) var(--space-sm);
} }
.remote-share-block { .remote-share-block {
margin: 0 var(--space-lg) var(--space-md); margin: 0 var(--space-sm) var(--space-sm);
} }
.remote-status-url { .remote-status-url {
@@ -1612,11 +1612,11 @@ Design tokens only (spacing/radius/color vars), no hardcoded px besides 0.
} }
.remote-cli-detection { .remote-cli-detection {
margin: 0 var(--space-lg) var(--space-md); margin: 0 var(--space-sm) var(--space-sm);
} }
.remote-external-tunnel-panel { .remote-external-tunnel-panel {
margin: 0 var(--space-lg) var(--space-md); margin: 0 var(--space-sm) var(--space-sm);
} }
} }
@@ -2259,7 +2259,7 @@ The header row wraps so the badge drops below the heading on narrow widths inste
} }
.settings-search { .settings-search {
padding: var(--space-md) var(--space-lg) var(--space-sm); padding: var(--space-sm) var(--space-md) var(--space-sm);
} }
/* FNXC:Settings 2026-07-09-12:00: mobile-only collapse-by-default toggle sits in the section picker control row so search and section navigation share one horizontal affordance row. The row starts collapsed and expands to the full search row below the picker on tap. */ /* FNXC:Settings 2026-07-09-12:00: mobile-only collapse-by-default toggle sits in the section picker control row so search and section navigation share one horizontal affordance row. The row starts collapsed and expands to the full search row below the picker on tap. */
@@ -2288,6 +2288,9 @@ The header row wraps so the badge drops below the heading on narrow widths inste
/* /*
FNXC:Settings 2026-07-09-00:00: FNXC:Settings 2026-07-09-00:00:
FN-7752 trims mobile-only Settings section chrome: after removing the visible picker label, use smaller horizontal padding for the picker and internal section text so narrow viewports devote more width to controls without changing desktop/tablet rules. FN-7752 trims mobile-only Settings section chrome: after removing the visible picker label, use smaller horizontal padding for the picker and internal section text so narrow viewports devote more width to controls without changing desktop/tablet rules.
FNXC:Settings 2026-07-10-00:00:
FN-7785 makes the Settings content pages uniformly tighter at mobile widths. The `.settings-content` scroll container is the primary lever so standalone and embedded Settings share the same reduced gutter, while section wrappers step down to token spacing without changing desktop/tablet rules.
*/ */
.settings-mobile-section-picker { .settings-mobile-section-picker {
display: flex; display: flex;
@@ -2355,7 +2358,7 @@ The header row wraps so the badge drops below the heading on narrow widths inste
} }
.notification-provider-card { .notification-provider-card {
margin: 0 var(--space-lg) var(--space-md); margin: 0 var(--space-sm) var(--space-sm);
} }
.notification-provider-header { .notification-provider-header {
@@ -2375,6 +2378,7 @@ The header row wraps so the badge drops below the heading on narrow widths inste
min-height: 0; min-height: 0;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
padding: var(--space-sm) var(--space-sm) var(--space-md);
} }
.settings-content .form-group small { .settings-content .form-group small {
@@ -2389,14 +2393,14 @@ The header row wraps so the badge drops below the heading on narrow widths inste
} }
.settings-section-heading { .settings-section-heading {
padding: var(--space-lg) var(--space-md) var(--space-md); padding: var(--space-md) var(--space-sm) var(--space-sm);
margin: 0 0 var(--space-md); margin: 0 0 var(--space-sm);
} }
.settings-plugins-subsection-toggle { .settings-plugins-subsection-toggle {
display: flex; display: flex;
width: 100%; width: 100%;
padding: 0 var(--space-lg); padding: 0 var(--space-sm);
} }
.settings-plugins-subsection-btn { .settings-plugins-subsection-btn {
@@ -2405,16 +2409,17 @@ The header row wraps so the badge drops below the heading on narrow widths inste
} }
.settings-plugins-subsection-panel { .settings-plugins-subsection-panel {
padding-left: var(--space-lg); padding-left: var(--space-sm);
padding-right: var(--space-lg); padding-right: var(--space-sm);
} }
.form-group { .form-group {
padding: 0 calc(var(--space-md) + var(--space-xs) / 2); padding: 0 var(--space-sm);
} }
.settings-scope-banner { .settings-scope-banner {
padding: var(--space-sm) var(--space-md); margin: 0 var(--space-sm) var(--space-xs);
padding: var(--space-xs) var(--space-sm);
} }
.memory-editor-frame { .memory-editor-frame {
@@ -2423,7 +2428,8 @@ The header row wraps so the badge drops below the heading on narrow widths inste
.memory-file-summary { .memory-file-summary {
grid-template-columns: 1fr; grid-template-columns: 1fr;
margin: 0 var(--space-lg) var(--space-md); margin: 0 var(--space-sm) var(--space-sm);
padding: var(--space-sm);
} }
.memory-status-message { .memory-status-message {
@@ -2440,13 +2446,22 @@ The header row wraps so the badge drops below the heading on narrow widths inste
} }
.settings-description { .settings-description {
padding: 0 var(--space-md); padding: 0 var(--space-sm);
}
.settings-empty-state {
padding: var(--space-sm);
}
.theme-selector {
padding: 0 var(--space-sm) var(--space-sm);
} }
.settings-model-lane-actions { .settings-model-lane-actions {
align-items: stretch; align-items: stretch;
flex-direction: column; flex-direction: column;
padding-inline: calc(var(--space-md) + var(--space-xs) / 2); margin-block: var(--space-xs) var(--space-md);
padding: var(--space-sm) var(--space-sm) var(--space-md);
} }
.settings-content .btn, .settings-content .btn,
@@ -2456,31 +2471,31 @@ The header row wraps so the badge drops below the heading on narrow widths inste
.auth-provider-row { .auth-provider-row {
flex-wrap: wrap; flex-wrap: wrap;
padding: var(--space-md) calc(var(--space-md) + var(--space-xs) / 2); padding: var(--space-sm);
gap: var(--space-sm); gap: var(--space-sm);
} }
.auth-section-hint { .auth-section-hint {
margin: 0 calc(var(--space-md) + var(--space-xs) / 2) var(--space-md); margin: 0 var(--space-sm) var(--space-sm);
padding: calc(var(--space-sm) + var(--space-xs) / 2) calc(var(--space-md) + var(--space-xs) / 2); padding: var(--space-sm);
} }
.auth-provider-group { .auth-provider-group {
margin-bottom: var(--space-md); margin-bottom: var(--space-sm);
} }
.auth-group-label { .auth-group-label {
padding: 0 calc(var(--space-md) + var(--space-xs) / 2); padding: 0 var(--space-sm);
} }
.auth-provider-card { .auth-provider-card {
margin: 0 calc(var(--space-md) + var(--space-xs) / 2) var(--space-sm); margin: 0 var(--space-sm) var(--space-sm);
} }
.auth-provider-header { .auth-provider-header {
flex-wrap: wrap; flex-wrap: wrap;
padding: calc(var(--space-sm) + var(--space-xs) / 2) calc(var(--space-md) + var(--space-xs) / 2); padding: var(--space-sm);
gap: 10px; gap: var(--space-sm);
} }
.auth-provider-header > div:not(.auth-provider-info):not(.auth-apikey-section) { .auth-provider-header > div:not(.auth-provider-info):not(.auth-apikey-section) {
@@ -2530,7 +2545,7 @@ The header row wraps so the badge drops below the heading on narrow widths inste
} }
.auth-hint { .auth-hint {
padding: var(--space-md) calc(var(--space-md) + var(--space-xs) / 2) 0; padding: var(--space-sm) var(--space-sm) 0;
} }
/* Settings modal: model preset controls stack cleanly on narrow screens */ /* Settings modal: model preset controls stack cleanly on narrow screens */
@@ -2541,7 +2556,7 @@ The header row wraps so the badge drops below the heading on narrow widths inste
.settings-preset-item { .settings-preset-item {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
padding: var(--space-sm) var(--space-md); padding: var(--space-sm);
} }
.settings-preset-item-actions { .settings-preset-item-actions {
@@ -2549,7 +2564,7 @@ The header row wraps so the badge drops below the heading on narrow widths inste
} }
.settings-preset-editor { .settings-preset-editor {
padding: var(--space-sm) var(--space-md); padding: var(--space-sm);
} }
.settings-preset-editor-actions { .settings-preset-editor-actions {
@@ -2562,7 +2577,7 @@ The header row wraps so the badge drops below the heading on narrow widths inste
} }
.settings-node-routing-note { .settings-node-routing-note {
padding: var(--space-sm) var(--space-md); padding: var(--space-sm);
font-size: 12px; font-size: 12px;
} }
} }

41
packages/dashboard/app/components/__tests__/settings-mobile.test.tsx
View File

@@ -549,22 +549,29 @@ describe("SettingsModal mobile adaptations", () => {
expectMobileRule(css, ".settings-mobile-section-picker select", "flex: 1 1 auto;"); expectMobileRule(css, ".settings-mobile-section-picker select", "flex: 1 1 auto;");
expectMobileRule(css, ".settings-mobile-section-picker .settings-search-empty-hint", "flex: 1 1 auto;"); expectMobileRule(css, ".settings-mobile-section-picker .settings-search-empty-hint", "flex: 1 1 auto;");
expectMobileRule(css, ".settings-navigation", "width: 100%;"); expectMobileRule(css, ".settings-navigation", "width: 100%;");
expectMobileRule(css, ".settings-search", "padding: var(--space-md) var(--space-lg) var(--space-sm);"); expectMobileRule(css, ".settings-search", "padding: var(--space-sm) var(--space-md) var(--space-sm);");
expectMobileRule(css, ".settings-sidebar", "display: none;"); expectMobileRule(css, ".settings-sidebar", "display: none;");
expectMobileRule(css, ".settings-nav-item", "display: flex;"); expectMobileRule(css, ".settings-nav-item", "display: flex;");
expectMobileRule(css, ".settings-nav-item", "align-items: center;"); expectMobileRule(css, ".settings-nav-item", "align-items: center;");
expectMobileRule(css, ".settings-nav-item", "justify-content: center;"); expectMobileRule(css, ".settings-nav-item", "justify-content: center;");
expectMobileRule(css, ".settings-nav-item", "gap: 4px;"); expectMobileRule(css, ".settings-nav-item", "gap: var(--space-xs);");
expectMobileRule(css, ".settings-content", "padding: var(--space-sm) var(--space-sm) var(--space-md);");
expectMobileRule(css, ".settings-content textarea", "font-size: 16px;"); expectMobileRule(css, ".settings-content textarea", "font-size: 16px;");
expectMobileRule(css, ".settings-section-heading", "padding: var(--space-lg) var(--space-md) var(--space-md);"); expectMobileRule(css, ".settings-section-heading", "padding: var(--space-md) var(--space-sm) var(--space-sm);");
expectMobileRule(css, ".settings-section-heading", "margin: 0 0 var(--space-md);"); expectMobileRule(css, ".settings-section-heading", "margin: 0 0 var(--space-sm);");
expectMobileRule(css, ".settings-scope-icon", "margin-right: 0;"); expectMobileRule(css, ".settings-scope-icon", "margin-right: 0;");
expectMobileRule(css, ".settings-scope-banner", "padding: var(--space-sm) var(--space-md);"); expectMobileRule(css, ".settings-scope-banner", "margin: 0 var(--space-sm) var(--space-xs);");
expectMobileRule(css, ".settings-empty-state", "padding: 12px 14px;"); expectMobileRule(css, ".settings-scope-banner", "padding: var(--space-xs) var(--space-sm);");
expectMobileRule(css, ".settings-description", "padding: 0 var(--space-md);"); expectMobileRule(css, ".settings-empty-state", "padding: var(--space-sm);");
expectMobileRule(css, ".theme-selector", "padding: 0 14px 14px;"); expectMobileRule(css, ".settings-description", "padding: 0 var(--space-sm);");
expectMobileRule(css, ".theme-selector", "padding: 0 var(--space-sm) var(--space-sm);");
expectMobileRule(css, ".settings-plugins-subsection-toggle", "padding: 0 var(--space-sm);");
expectMobileRule(css, ".settings-plugins-subsection-panel", "padding-left: var(--space-sm);");
expectMobileRule(css, ".form-group", "padding: 0 var(--space-sm);");
expectMobileRule(css, ".settings-preset-item", "flex-direction: column;"); expectMobileRule(css, ".settings-preset-item", "flex-direction: column;");
expectMobileRule(css, ".settings-preset-item-actions", "justify-content: flex-start;"); expectMobileRule(css, ".settings-preset-item-actions", "justify-content: flex-start;");
expectMobileRule(css, ".settings-preset-item", "padding: var(--space-sm);");
expectMobileRule(css, ".settings-preset-editor", "padding: var(--space-sm);");
expectMobileRule(css, ".settings-preset-size-grid", "grid-template-columns: 1fr;"); expectMobileRule(css, ".settings-preset-size-grid", "grid-template-columns: 1fr;");
expectMobileRule(css, ".settings-modal .modal-actions", "padding-block: var(--space-xs);"); expectMobileRule(css, ".settings-modal .modal-actions", "padding-block: var(--space-xs);");
expectMobileRule(css, ".settings-modal .modal-actions", "flex-wrap: nowrap;"); expectMobileRule(css, ".settings-modal .modal-actions", "flex-wrap: nowrap;");
@@ -583,16 +590,28 @@ describe("SettingsModal mobile adaptations", () => {
expectMobileRule(css, ".settings-modal .settings-modal-version", "line-height: 1;"); expectMobileRule(css, ".settings-modal .settings-modal-version", "line-height: 1;");
expectMobileRule(css, ".settings-modal .settings-modal-version", "white-space: nowrap;"); expectMobileRule(css, ".settings-modal .settings-modal-version", "white-space: nowrap;");
expect(css).toContain(".settings-modal .modal-header {\n padding-block: var(--space-sm);"); expect(css).toContain(".settings-modal .modal-header {\n padding-block: var(--space-sm);");
expectMobileRule(css, ".auth-provider-row", "padding: var(--space-sm);");
expectMobileRule(css, ".auth-section-hint", "margin: 0 var(--space-sm) var(--space-sm);");
expectMobileRule(css, ".auth-section-hint", "padding: var(--space-sm);");
expectMobileRule(css, ".auth-group-label", "padding: 0 var(--space-sm);");
expectMobileRule(css, ".auth-provider-card", "margin: 0 var(--space-sm) var(--space-sm);");
expectMobileRule(css, ".auth-provider-header", "padding: var(--space-sm);");
expectMobileRule(css, ".auth-provider-header > div:not(.auth-provider-info):not(.auth-apikey-section)", "margin-left: auto;"); expectMobileRule(css, ".auth-provider-header > div:not(.auth-provider-info):not(.auth-apikey-section)", "margin-left: auto;");
expectMobileRule(css, ".auth-apikey-section", "align-items: flex-end;"); expectMobileRule(css, ".auth-apikey-section", "align-items: flex-end;");
expectMobileRule(css, ".auth-apikey-input-row", "justify-content: flex-end;"); expectMobileRule(css, ".auth-apikey-input-row", "justify-content: flex-end;");
expectMobileRule(css, ".auth-apikey-input-row .btn", "margin-left: auto;"); expectMobileRule(css, ".auth-apikey-input-row .btn", "margin-left: auto;");
expectMobileRule(css, ".auth-hint", "padding: var(--space-sm) var(--space-sm) 0;");
expectMobileRule(css, ".notification-provider-card", "margin: 0 var(--space-sm) var(--space-sm);");
expectMobileRule(css, ".notification-provider-header", "padding: var(--space-sm) var(--space-md);"); expectMobileRule(css, ".notification-provider-header", "padding: var(--space-sm) var(--space-md);");
expectMobileRule(css, ".notification-provider-body", "padding: var(--space-md);"); expectMobileRule(css, ".notification-provider-body", "padding: var(--space-md);");
expectMobileRule(css, ".memory-file-summary", "margin: 0 var(--space-sm) var(--space-sm);");
expectMobileRule(css, ".memory-file-summary", "padding: var(--space-sm);");
expectMobileRule(css, ".settings-model-lane-actions", "padding: var(--space-sm) var(--space-sm) var(--space-md);");
expectMobileRule(css, ".settings-node-routing-note", "padding: var(--space-sm);");
// Remote Access header elements must use the same mobile gutter as other remote blocks // Remote Access header elements must use the same tightened mobile gutter as other settings blocks
expectMobileRule(css, ".remote-status-bar", "margin: 0 var(--space-lg) var(--space-md);"); expectMobileRule(css, ".remote-status-bar", "margin: 0 var(--space-sm) var(--space-sm);");
expectMobileRule(css, ".remote-share-block", "margin: 0 var(--space-lg) var(--space-md);"); expectMobileRule(css, ".remote-share-block", "margin: 0 var(--space-sm) var(--space-sm);");
expectMobileRule(css, ".settings-research-provider-advanced-details", "padding-inline-start: 0;"); expectMobileRule(css, ".settings-research-provider-advanced-details", "padding-inline-start: 0;");
expectMobileRule(css, ".settings-research-source-grid", "grid-template-columns: 1fr;"); expectMobileRule(css, ".settings-research-source-grid", "grid-template-columns: 1fr;");
expectMobileRule(css, ".settings-research-limits-grid", "grid-template-columns: 1fr;"); expectMobileRule(css, ".settings-research-limits-grid", "grid-template-columns: 1fr;");