Commit ef969c6587 for woocommerce
commit ef969c6587976e98537e59e57db3f5227c7c50a6
Author: Ninos Ego <me@ninosego.de>
Date: Mon Jan 19 09:56:51 2026 +0100
Replace admin bar height with css variable (#62608)
* Replace admin bar height with css variable
* Add changefile(s) from automation for the following project(s): woocommerce, woocommerce/client/admin
---------
Co-authored-by: woocommercebot <woocommercebot@users.noreply.github.com>
diff --git a/plugins/woocommerce/changelog/62608-admin-bar-variable b/plugins/woocommerce/changelog/62608-admin-bar-variable
new file mode 100644
index 0000000000..ab0700e61a
--- /dev/null
+++ b/plugins/woocommerce/changelog/62608-admin-bar-variable
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Replace admin bar height with css variable
\ No newline at end of file
diff --git a/plugins/woocommerce/client/admin/client/wp-admin-scripts/fulfillments/components/user-interface/fulfillment-drawer/fulfillment-drawer.scss b/plugins/woocommerce/client/admin/client/wp-admin-scripts/fulfillments/components/user-interface/fulfillment-drawer/fulfillment-drawer.scss
index db6c13ef47..4df41b5d72 100644
--- a/plugins/woocommerce/client/admin/client/wp-admin-scripts/fulfillments/components/user-interface/fulfillment-drawer/fulfillment-drawer.scss
+++ b/plugins/woocommerce/client/admin/client/wp-admin-scripts/fulfillments/components/user-interface/fulfillment-drawer/fulfillment-drawer.scss
@@ -1,9 +1,9 @@
.woocommerce-fulfillment-drawer {
position: fixed;
inset: 0;
- top: 32px;
+ top: var(--wp-admin--admin-bar--height, 0px);
left: auto;
- height: calc(100vh - 32px);
+ height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
z-index: 9999;
width: calc(27.7778vw + 1px);
min-width: 401px;
@@ -107,8 +107,6 @@
@media screen and (max-width: 782px) {
.woocommerce-fulfillment-drawer {
- top: 46px;
- height: calc(100vh - 46px);
width: 100%;
min-width: 100%;
max-width: 100%;
@@ -118,7 +116,7 @@
max-width: 100%;
}
&__body {
- height: calc(100% - 73px);
+ height: calc(100% - var(--wp-admin--admin-bar--height, 0px) - 27px);
}
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/drawer/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/drawer/style.scss
index c59398509a..66338ba9b7 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/drawer/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/drawer/style.scss
@@ -151,13 +151,6 @@ $drawer-animation-duration: 0.3s;
}
.admin-bar .wc-block-components-drawer__content {
- margin-top: 46px;
- height: calc(100dvh - 46px);
-}
-
-@media only screen and (min-width: 783px) {
- .admin-bar .wc-block-components-drawer__content {
- margin-top: 32px;
- height: calc(100dvh - 32px);
- }
+ margin-top: var(--wp-admin--admin-bar--height, 0px);
+ height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}
diff --git a/plugins/woocommerce/client/legacy/css/photoswipe/photoswipe.css b/plugins/woocommerce/client/legacy/css/photoswipe/photoswipe.css
index df4186cbc5..b648059f51 100644
--- a/plugins/woocommerce/client/legacy/css/photoswipe/photoswipe.css
+++ b/plugins/woocommerce/client/legacy/css/photoswipe/photoswipe.css
@@ -58,14 +58,8 @@ button.pswp__button--zoom:hover {
/* adjust for admin bar */
.admin-bar .pswp {
- height: calc(100% - 32px);
- top: 32px;
- }
- @media screen and (max-width: 782px) {
- .admin-bar .pswp {
- height: calc(100% - 46px);
- top: 46px;
- }
+ height: calc(100% - var(--wp-admin--admin-bar--height, 0px));
+ top: var(--wp-admin--admin-bar--height, 0px);
}
/* style is added when JS option showHideOpacity is set to true */