Commit 4b8e56b6503 for woocommerce

commit 4b8e56b65035aaa8b7e327559c73c5b88482b75a
Author: Cvetan Cvetanov <cvetan.cvetanov@automattic.com>
Date:   Mon Jun 15 23:44:29 2026 +0300

    Fix horizontal overflow of the settings UI tab bar (#65715)

    * Fix horizontal overflow of the settings UI tab bar

    The .wc-settings-ui-shell__tabs rule sets width: 100% together with
    padding: 0 48px while the nav element remains content-box, so any
    settings UI page rendering a sectionNavigation tab bar (including the
    Products reference migration) is 96px wider than the viewport and shows
    a horizontal scrollbar.

    Include the padding in the declared width with box-sizing: border-box.

    * Fix settings UI shell overflow at the responsive breakpoint

    At max-width: 960px the base `.wc-settings-ui-shell.admin-ui-page`
    (specificity 0,2,0) kept its -48px margins because the breakpoint
    override targeted `.wc-settings-ui-shell` (0,1,0) and lost the cascade,
    so the shell stayed 24px wider than the 24px-padded content on each side.
    A `.wc-settings-ui-shell__navigation` override then expanded the nav
    another -24px each side (width: calc(100% + 48px)), compounding it — at a
    640px viewport the page overflowed to 688px.

    Match the breakpoint shell override to the base specificity so the -24px
    full-bleed margins apply, and drop the navigation override so it inherits
    the base margin: 0 / width: 100% and stays within the now-correctly
    full-bleed shell.

diff --git a/plugins/woocommerce/changelog/fix-settings-ui-tabs-horizontal-overflow b/plugins/woocommerce/changelog/fix-settings-ui-tabs-horizontal-overflow
new file mode 100644
index 00000000000..6b1c0979aa4
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-settings-ui-tabs-horizontal-overflow
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix horizontal page overflow caused by the Settings UI tab bar including its padding outside the declared width.
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 7059326e97a..460fb7c13bb 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
@@ -141,6 +141,7 @@ body.woocommerce_page_wc-settings.woocommerce-settings-ui-page {

 	.wc-settings-ui-shell__tabs {
 		background: #fff;
+		box-sizing: border-box;
 		display: flex;
 		margin: 0 !important;
 		overflow-x: auto;
@@ -391,7 +392,10 @@ body.woocommerce_page_wc-settings.woocommerce-settings-ui-page {
 			padding-right: 24px;
 		}

-		.wc-settings-ui-shell {
+		// Match the base `.wc-settings-ui-shell.admin-ui-page` specificity so
+		// this breakpoint's full-bleed margin actually overrides the -48px
+		// base value instead of losing the cascade.
+		.wc-settings-ui-shell.admin-ui-page {
 			margin-left: -24px;
 			margin-right: -24px;
 		}
@@ -401,12 +405,6 @@ body.woocommerce_page_wc-settings.woocommerce-settings-ui-page {
 			padding-right: 24px;
 		}

-		.wc-settings-ui-shell__navigation {
-			margin-left: -24px;
-			margin-right: -24px;
-			width: calc(100% + 48px);
-		}
-
 		.wc-settings-ui-shell__tabs {
 			padding-left: 24px;
 			padding-right: 24px;