Commit 5dc79971065 for woocommerce
commit 5dc79971065e89bc3f05debdc61ee6aaa28aedcb
Author: Ahmed <ahmed.el.azzabi@automattic.com>
Date: Fri Aug 7 10:13:56 2026 +0100
Preserve responsive Settings UI shell gutter alignment (#67449)
* fix(settings): Keep responsive shell gutters synchronized
Responsive shell alignment previously depended on separate WPDS padding and gap tokens resolving to the same 24px value. If those token families diverged, the negative shell margins could stop cancelling the form gutter and introduce horizontal overflow.\n\nRoute every responsive shell offset through one local gutter property backed by the WPDS padding token. This preserves the current layout while keeping the cancellation invariant explicit.\n\nRefs WOOPRD-3608
* chore(changelog): Add responsive gutter fix entry
diff --git a/plugins/woocommerce/changelog/fix-settings-ui-responsive-gutter b/plugins/woocommerce/changelog/fix-settings-ui-responsive-gutter
new file mode 100644
index 00000000000..08ea6aadc57
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-settings-ui-responsive-gutter
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Keep responsive Settings UI shell gutters synchronized with WPDS spacing tokens.
diff --git a/plugins/woocommerce/client/admin/client/wp-admin-scripts/settings-embed/settings-ui.scss b/plugins/woocommerce/client/admin/client/wp-admin-scripts/settings-embed/settings-ui.scss
index cd89d1e287b..72044aee120 100644
--- a/plugins/woocommerce/client/admin/client/wp-admin-scripts/settings-embed/settings-ui.scss
+++ b/plugins/woocommerce/client/admin/client/wp-admin-scripts/settings-embed/settings-ui.scss
@@ -283,33 +283,35 @@ body.woocommerce_page_wc-settings.woocommerce-settings-ui-page {
}
@media (max-width: 960px) {
+ --wc-settings-ui-shell-gutter: var(--wpds-dimension-padding-2xl);
+
#mainform {
- padding: 0 var(--wpds-dimension-padding-2xl)
+ padding: 0 var(--wc-settings-ui-shell-gutter)
var(--wpds-dimension-padding-3xl);
}
.wc-settings-ui-shell {
- margin-left: calc(var(--wpds-dimension-gap-xl) * -1);
- margin-right: calc(var(--wpds-dimension-gap-xl) * -1);
+ margin-left: calc(var(--wc-settings-ui-shell-gutter) * -1);
+ margin-right: calc(var(--wc-settings-ui-shell-gutter) * -1);
}
.wc-settings-ui-shell__header {
- padding-left: var(--wpds-dimension-padding-2xl);
- padding-right: var(--wpds-dimension-padding-2xl);
+ padding-left: var(--wc-settings-ui-shell-gutter);
+ padding-right: var(--wc-settings-ui-shell-gutter);
}
.wc-settings-ui-shell__tabs {
- padding-left: var(--wpds-dimension-padding-2xl);
- padding-right: var(--wpds-dimension-padding-2xl);
+ padding-left: var(--wc-settings-ui-shell-gutter);
+ padding-right: var(--wc-settings-ui-shell-gutter);
}
.wc-settings-ui-shell__notice {
- margin-left: var(--wpds-dimension-gap-xl);
- margin-right: var(--wpds-dimension-gap-xl);
+ margin-left: var(--wc-settings-ui-shell-gutter);
+ margin-right: var(--wc-settings-ui-shell-gutter);
}
.wc-settings-ui {
- margin: 48px var(--wpds-dimension-gap-xl)
+ margin: 48px var(--wc-settings-ui-shell-gutter)
var(--wpds-dimension-gap-2xl);
max-width: none;
}