FN-8125: align mobile Settings auth cards

Align Authentication provider card content with the Settings section header on mobile.

- Remove the nested mobile gutter within Authentication panels.
- Preserve Custom Provider card spacing outside authentication panels.
- Cover scoped mobile alignment rules and add a patch changeset.

Files changed:
 .changeset/fn-8125-mobile-auth-card-alignment.md   |  7 +++++++
 .../dashboard/app/components/SettingsModal.css     | 22 ++++++++++++++++++++++
 .../components/__tests__/settings-mobile.test.tsx  |  7 +++++--
 3 files changed, 34 insertions(+), 2 deletions(-)

Fusion-Task-Id: FN-8125

Fusion-Task-Lineage: a299fe3e-8a32-401a-85f2-85fe58e61da3

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>

.changeset/fn-8125-mobile-auth-card-alignment.md

@@ -0,0 +1,7 @@
+---
+"@runfusion/fusion": patch
+---
+
+summary: Align mobile Settings provider cards with the section header's left edge.
+category: fix
+dev: Mobile-only CSS in SettingsModal.css — zero the .auth-panel-body padding-inline and reduce the scoped .auth-panel-body .auth-provider-card / .auth-section-hint / .auth-group-label horizontal inset so auth-panel cards, hint, and group-label share the header gutter; the unscoped .auth-provider-card rule (CustomProvidersSection) is left unchanged.

packages/dashboard/app/components/SettingsModal.css

@@ -2884,6 +2884,28 @@ The header row wraps so the badge drops below the heading on narrow widths inste
     margin: 0 var(--space-sm) var(--space-sm);
   }
 
+  /*
+  FNXC:SettingsLayout 2026-07-16-12:34:
+  On mobile, auth-panel provider cards and their hint and group-label siblings must share the
+  Authentication section header's left edge. Remove the stacked panel/card horizontal inset only
+  inside .auth-panel-body so Custom Provider cards outside the panel keep their existing gutter.
+  */
+  .auth-panel-body {
+    padding-inline: 0;
+  }
+
+  .auth-panel-body .auth-section-hint {
+    margin: 0 0 var(--space-sm);
+  }
+
+  .auth-panel-body .auth-group-label {
+    padding: 0;
+  }
+
+  .auth-panel-body .auth-provider-card {
+    margin: 0 0 var(--space-sm);
+  }
+
   .auth-provider-header {
     flex-wrap: wrap;
     padding: var(--space-sm);

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

@@ -768,9 +768,12 @@ describe("SettingsModal mobile adaptations", () => {
     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-panel-body", "padding-inline: 0;");
+    expectMobileRule(css, ".auth-panel-body .auth-section-hint", "margin: 0 0 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-panel-body .auth-group-label", "padding: 0;");
+    expectMobileRule(css, ".auth-panel-body .auth-provider-card", "margin: 0 0 var(--space-sm);");
+    // Custom Provider cards render outside .auth-panel-body and retain their mobile gutter.
     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;");