Commit 1bfb10342bd for woocommerce
commit 1bfb10342bdead51979f71282e335f027bc75a58
Author: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Date: Tue Mar 31 09:46:14 2026 +0800
Fix interval selector shifting downward on WP 7.0 (#63843)
* fix: restore interval selector margin to prevent downward shift on WP 7.0
* add changelog entry
* fix: address PR feedback - use padding instead of margin for interval selector alignment
* fix: add __nextHasNoMarginBottom to dashboard-charts interval SelectControl
* add changelog entry
diff --git a/packages/js/components/changelog/fix-wooa7s-1161-interval-selector-shift b/packages/js/components/changelog/fix-wooa7s-1161-interval-selector-shift
new file mode 100644
index 00000000000..0cca25acd2d
--- /dev/null
+++ b/packages/js/components/changelog/fix-wooa7s-1161-interval-selector-shift
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix interval selector shifting downward on WP 7.0 by restoring margin-bottom.
diff --git a/packages/js/components/src/chart/index.js b/packages/js/components/src/chart/index.js
index 9f98e96c63f..b6ebbef1189 100644
--- a/packages/js/components/src/chart/index.js
+++ b/packages/js/components/src/chart/index.js
@@ -250,6 +250,7 @@ class Chart extends Component {
<div className="woocommerce-chart__interval-select">
<SelectControl
__next40pxDefaultSize
+ __nextHasNoMarginBottom
value={ interval }
options={ allowedIntervals.map( ( allowedInterval ) => ( {
value: allowedInterval,
diff --git a/packages/js/components/src/chart/style.scss b/packages/js/components/src/chart/style.scss
index 8e0cc1ac0a7..be8ad7ab566 100644
--- a/packages/js/components/src/chart/style.scss
+++ b/packages/js/components/src/chart/style.scss
@@ -65,12 +65,11 @@
justify-content: center;
margin: 0 0 0 auto;
min-height: 50px;
- padding: 8px $gap 0 $gap;
+ padding: 0 $gap;
@include breakpoint( '<960px' ) {
width: 100%;
order: 1;
- margin-top: -8px;
margin-left: 0;
padding-left: math.div($gap, 2);
border-right: 0;
diff --git a/packages/js/components/src/section-header/style.scss b/packages/js/components/src/section-header/style.scss
index fbf4bd78572..0af35648e64 100644
--- a/packages/js/components/src/section-header/style.scss
+++ b/packages/js/components/src/section-header/style.scss
@@ -46,11 +46,7 @@
justify-content: flex-end;
.components-base-control {
- padding-top: 0;
- min-height: 34px;
-
.components-base-control__field {
- margin-bottom: 0;
select {
background: transparent;
}
diff --git a/plugins/woocommerce/changelog/fix-dashboard-charts-margin-bottom-deprecation b/plugins/woocommerce/changelog/fix-dashboard-charts-margin-bottom-deprecation
new file mode 100644
index 00000000000..8390f1a7a14
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-dashboard-charts-margin-bottom-deprecation
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Add __nextHasNoMarginBottom prop to dashboard-charts interval SelectControl to resolve deprecation warning.
diff --git a/plugins/woocommerce/client/admin/client/dashboard/dashboard-charts/index.js b/plugins/woocommerce/client/admin/client/dashboard/dashboard-charts/index.js
index 24e9f13f17d..9943730ef6e 100644
--- a/plugins/woocommerce/client/admin/client/dashboard/dashboard-charts/index.js
+++ b/plugins/woocommerce/client/admin/client/dashboard/dashboard-charts/index.js
@@ -76,6 +76,7 @@ const renderIntervalSelector = ( {
return (
<SelectControl
__next40pxDefaultSize
+ __nextHasNoMarginBottom
className="woocommerce-chart__interval-select"
value={ chartInterval }
options={ allowedIntervals.map( ( allowedInterval ) => ( {