Commit be8ae4df341 for woocommerce

commit be8ae4df34177ad3636512fa2a4794d74be6f9c0
Author: Peter Petrov <peter.petrov89@gmail.com>
Date:   Tue Aug 11 14:00:55 2026 +0300

    Fix dropdown button arrow shifting sideways when open in RTL (#67525)

    * Fix dropdown button arrow shifting sideways when open in RTL

    * Align dropdown button arrow spacing between RTL and LTR

diff --git a/packages/js/components/changelog/fix-53727-rtl-dropdown-arrow b/packages/js/components/changelog/fix-53727-rtl-dropdown-arrow
new file mode 100644
index 00000000000..0ca7e14ccf4
--- /dev/null
+++ b/packages/js/components/changelog/fix-53727-rtl-dropdown-arrow
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Keep the dropdown button arrow in place when open in RTL languages
diff --git a/packages/js/components/src/dropdown-button/style.scss b/packages/js/components/src/dropdown-button/style.scss
index d265f38c834..938215c2712 100644
--- a/packages/js/components/src/dropdown-button/style.scss
+++ b/packages/js/components/src/dropdown-button/style.scss
@@ -15,13 +15,18 @@
 			no-repeat right 0 top 55%;
 		position: absolute;
 		right: 14px;
-		width: 32px;
+		// Match the glyph width so the mask anchor can't skew the arrow's
+		// edge distance when rtlcss mirrors the box but not the mask.
+		width: 20px;
 		height: 48px;
 	}

 	&.is-open {
 		&::after {
-			transform: translateX(12px) translateY(2px) rotate(180deg);
+			// scaleY instead of rotate(180deg): the glyph is horizontally
+			// symmetric, and a purely vertical flip needs no translateX
+			// compensation, which rtlcss would flip the wrong way in RTL.
+			transform: translateY(2px) scaleY(-1);
 		}
 	}