Commit 2f0dd83a9aa for woocommerce
commit 2f0dd83a9aaf07008b9e52405a5089c90fa820fc
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date: Fri Aug 7 14:00:20 2026 +0200
Fix Mini-Cart drawer not visible in RTL languages (#67453)
* Fix Mini-Cart block not visible in RTL languages
* Add changelog
* Cleanup
* Prefer using dir(rtl) instead of .rtl
diff --git a/plugins/woocommerce/changelog/fix-mini-cart-rtl b/plugins/woocommerce/changelog/fix-mini-cart-rtl
new file mode 100644
index 00000000000..ed7fd878b2f
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-mini-cart-rtl
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix Mini-Cart block not visible in RTL languages
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 179ec848586..9af642faa7c 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
@@ -63,16 +63,15 @@ $drawer-animation-duration: 0.3s;
background: #fff;
display: block;
height: 100%;
- left: 100%;
+ inset-inline-start: 100%;
position: fixed;
- right: 0;
top: 0;
transform: translateX(max(-100%, var(--neg-drawer-width)));
width: var(--drawer-width);
max-width: 100%;
}
-.rtl .wc-block-components-drawer {
+.wc-block-components-drawer:dir(rtl) {
transform: translateX(min(100%, var(--drawer-width)));
}
@@ -87,9 +86,8 @@ $drawer-animation-duration: 0.3s;
animation-name: slidein;
}
-.rtl
- .wc-block-components-drawer__screen-overlay--with-slide-in
- .wc-block-components-drawer {
+.wc-block-components-drawer__screen-overlay--with-slide-in
+ .wc-block-components-drawer:dir(rtl) {
animation-name: rtlslidein;
}
@@ -116,7 +114,7 @@ $drawer-animation-duration: 0.3s;
color: inherit !important;
position: absolute !important;
top: $gap-small;
- right: $gap-small;
+ inset-inline-end: $gap-small;
opacity: 0.6;
z-index: 2;
// Increase clickable area.