From 4d4e9ad5cbc39090333b347335034a2923e56d5a Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Fri, 10 Jul 2026 08:26:41 -0700
Subject: [PATCH] FN-7785: reduce margin and padding across mobile Settings
 pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .changeset/fn-7785-mobile-settings-spacing.md |  7 ++
 .../app/components/SettingsModal.css          | 73 +++++++++++--------
 .../__tests__/settings-mobile.test.tsx        | 41 ++++++++---
 3 files changed, 81 insertions(+), 40 deletions(-)
 create mode 100644 .changeset/fn-7785-mobile-settings-spacing.md

diff --git a/.changeset/fn-7785-mobile-settings-spacing.md b/.changeset/fn-7785-mobile-settings-spacing.md
new file mode 100644
index 0000000000..c107418923
--- /dev/null
+++ b/.changeset/fn-7785-mobile-settings-spacing.md
@@ -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.
diff --git a/packages/dashboard/app/components/SettingsModal.css b/packages/dashboard/app/components/SettingsModal.css
index 3bc8fee04b..f110a23ba6 100644
--- a/packages/dashboard/app/components/SettingsModal.css
+++ b/packages/dashboard/app/components/SettingsModal.css
@@ -1565,7 +1565,7 @@ Design tokens only (spacing/radius/color vars), no hardcoded px besides 0.
 
 @media (max-width: 768px) {
   .settings-note {
-    padding: 0 var(--space-lg);
+    padding: 0 var(--space-sm);
   }
 
   .settings-overlap-ignore-row {
@@ -1590,11 +1590,11 @@ Design tokens only (spacing/radius/color vars), no hardcoded px besides 0.
 
   .remote-status-bar {
     flex-wrap: wrap;
-    margin: 0 var(--space-lg) var(--space-md);
+    margin: 0 var(--space-sm) var(--space-sm);
   }
 
   .remote-share-block {
-    margin: 0 var(--space-lg) var(--space-md);
+    margin: 0 var(--space-sm) var(--space-sm);
   }
 
   .remote-status-url {
@@ -1612,11 +1612,11 @@ Design tokens only (spacing/radius/color vars), no hardcoded px besides 0.
   }
 
   .remote-cli-detection {
-    margin: 0 var(--space-lg) var(--space-md);
+    margin: 0 var(--space-sm) var(--space-sm);
   }
 
   .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 {
-    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. */
@@ -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:
   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 {
     display: flex;
@@ -2355,7 +2358,7 @@ The header row wraps so the badge drops below the heading on narrow widths inste
   }
 
   .notification-provider-card {
-    margin: 0 var(--space-lg) var(--space-md);
+    margin: 0 var(--space-sm) var(--space-sm);
   }
 
   .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;
     overflow-x: hidden;
     overflow-y: auto;
+    padding: var(--space-sm) var(--space-sm) var(--space-md);
   }
 
   .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 {
-    padding: var(--space-lg) var(--space-md) var(--space-md);
-    margin: 0 0 var(--space-md);
+    padding: var(--space-md) var(--space-sm) var(--space-sm);
+    margin: 0 0 var(--space-sm);
   }
 
   .settings-plugins-subsection-toggle {
     display: flex;
     width: 100%;
-    padding: 0 var(--space-lg);
+    padding: 0 var(--space-sm);
   }
 
   .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 {
-    padding-left: var(--space-lg);
-    padding-right: var(--space-lg);
+    padding-left: var(--space-sm);
+    padding-right: var(--space-sm);
   }
 
   .form-group {
-    padding: 0 calc(var(--space-md) + var(--space-xs) / 2);
+    padding: 0 var(--space-sm);
   }
 
   .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 {
@@ -2423,7 +2428,8 @@ The header row wraps so the badge drops below the heading on narrow widths inste
 
   .memory-file-summary {
     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 {
@@ -2440,13 +2446,22 @@ The header row wraps so the badge drops below the heading on narrow widths inste
   }
 
   .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 {
     align-items: stretch;
     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,
@@ -2456,31 +2471,31 @@ The header row wraps so the badge drops below the heading on narrow widths inste
 
   .auth-provider-row {
     flex-wrap: wrap;
-    padding: var(--space-md) calc(var(--space-md) + var(--space-xs) / 2);
+    padding: var(--space-sm);
     gap: var(--space-sm);
   }
 
   .auth-section-hint {
-    margin: 0 calc(var(--space-md) + var(--space-xs) / 2) var(--space-md);
-    padding: calc(var(--space-sm) + var(--space-xs) / 2) calc(var(--space-md) + var(--space-xs) / 2);
+    margin: 0 var(--space-sm) var(--space-sm);
+    padding: var(--space-sm);
   }
 
   .auth-provider-group {
-    margin-bottom: var(--space-md);
+    margin-bottom: var(--space-sm);
   }
 
   .auth-group-label {
-    padding: 0 calc(var(--space-md) + var(--space-xs) / 2);
+    padding: 0 var(--space-sm);
   }
 
   .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 {
     flex-wrap: wrap;
-    padding: calc(var(--space-sm) + var(--space-xs) / 2) calc(var(--space-md) + var(--space-xs) / 2);
-    gap: 10px;
+    padding: var(--space-sm);
+    gap: var(--space-sm);
   }
 
   .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 {
-    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 */
@@ -2541,7 +2556,7 @@ The header row wraps so the badge drops below the heading on narrow widths inste
   .settings-preset-item {
     flex-direction: column;
     align-items: stretch;
-    padding: var(--space-sm) var(--space-md);
+    padding: var(--space-sm);
   }
 
   .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 {
-    padding: var(--space-sm) var(--space-md);
+    padding: var(--space-sm);
   }
 
   .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 {
-    padding: var(--space-sm) var(--space-md);
+    padding: var(--space-sm);
     font-size: 12px;
   }
 }
diff --git a/packages/dashboard/app/components/__tests__/settings-mobile.test.tsx b/packages/dashboard/app/components/__tests__/settings-mobile.test.tsx
index 54e803bf93..64639fc113 100644
--- a/packages/dashboard/app/components/__tests__/settings-mobile.test.tsx
+++ b/packages/dashboard/app/components/__tests__/settings-mobile.test.tsx
@@ -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 .settings-search-empty-hint", "flex: 1 1 auto;");
     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-nav-item", "display: flex;");
     expectMobileRule(css, ".settings-nav-item", "align-items: 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-section-heading", "padding: var(--space-lg) var(--space-md) var(--space-md);");
-    expectMobileRule(css, ".settings-section-heading", "margin: 0 0 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-sm);");
     expectMobileRule(css, ".settings-scope-icon", "margin-right: 0;");
-    expectMobileRule(css, ".settings-scope-banner", "padding: var(--space-sm) var(--space-md);");
-    expectMobileRule(css, ".settings-empty-state", "padding: 12px 14px;");
-    expectMobileRule(css, ".settings-description", "padding: 0 var(--space-md);");
-    expectMobileRule(css, ".theme-selector", "padding: 0 14px 14px;");
+    expectMobileRule(css, ".settings-scope-banner", "margin: 0 var(--space-sm) var(--space-xs);");
+    expectMobileRule(css, ".settings-scope-banner", "padding: var(--space-xs) var(--space-sm);");
+    expectMobileRule(css, ".settings-empty-state", "padding: var(--space-sm);");
+    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-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-modal .modal-actions", "padding-block: var(--space-xs);");
     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", "white-space: nowrap;");
     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-apikey-section", "align-items: 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-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-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
-    expectMobileRule(css, ".remote-status-bar", "margin: 0 var(--space-lg) var(--space-md);");
-    expectMobileRule(css, ".remote-share-block", "margin: 0 var(--space-lg) var(--space-md);");
+    // Remote Access header elements must use the same tightened mobile gutter as other settings blocks
+    expectMobileRule(css, ".remote-status-bar", "margin: 0 var(--space-sm) var(--space-sm);");
+    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-source-grid", "grid-template-columns: 1fr;");
     expectMobileRule(css, ".settings-research-limits-grid", "grid-template-columns: 1fr;");