diff --git a/.changeset/fn-8125-mobile-auth-card-alignment.md b/.changeset/fn-8125-mobile-auth-card-alignment.md new file mode 100644 index 0000000000..106a8b1c9f --- /dev/null +++ b/.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. diff --git a/packages/dashboard/app/components/SettingsModal.css b/packages/dashboard/app/components/SettingsModal.css index 713597e38d..eb97ea54c1 100644 --- a/packages/dashboard/app/components/SettingsModal.css +++ b/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); diff --git a/packages/dashboard/app/components/__tests__/settings-mobile.test.tsx b/packages/dashboard/app/components/__tests__/settings-mobile.test.tsx index 0f43ee1253..82ed92a923 100644 --- a/packages/dashboard/app/components/__tests__/settings-mobile.test.tsx +++ b/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;");