From e1b4058b7733a5d1fe1d311023c5027bdf38347d Mon Sep 17 00:00:00 2001 From: Ivan Malison Date: Wed, 5 Aug 2026 15:38:25 -0700 Subject: [PATCH] fix(app): emit transform-origin as x-then-y for native menu popovers (#2911) CSS accepts transform-origin keyword pairs in either order, but React Native parses them positionally (x first). The vertical-first string crashed anchored menu popovers on native wide form factors with "Transform-origin left can only be used for x-position". Co-authored-by: Claude Fable 5 --- packages/app/src/components/ui/menu/menu-anchor.test.ts | 4 ++-- packages/app/src/components/ui/menu/menu-anchor.ts | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/app/src/components/ui/menu/menu-anchor.test.ts b/packages/app/src/components/ui/menu/menu-anchor.test.ts index d779714f0..ecdf438fe 100644 --- a/packages/app/src/components/ui/menu/menu-anchor.test.ts +++ b/packages/app/src/components/ui/menu/menu-anchor.test.ts @@ -68,8 +68,8 @@ describe("computePosition", () => { describe("getTransformOrigin", () => { it.each([ - ["bottom", "start", "top left"], - ["top", "end", "bottom right"], + ["bottom", "start", "left top"], + ["top", "end", "right bottom"], ["right", "center", "center center"], ] as const)("maps %s/%s to %s", (placement, alignment, expected) => { expect(getTransformOrigin(placement, alignment)).toBe(expected); diff --git a/packages/app/src/components/ui/menu/menu-anchor.ts b/packages/app/src/components/ui/menu/menu-anchor.ts index e255fc74a..c7548dde6 100644 --- a/packages/app/src/components/ui/menu/menu-anchor.ts +++ b/packages/app/src/components/ui/menu/menu-anchor.ts @@ -155,5 +155,7 @@ export function getTransformOrigin(placement: Placement, alignment: Alignment): else if (alignment === "end") horizontal = "right"; else horizontal = "center"; - return `${vertical} ${horizontal}`; + // React Native parses transform-origin positionally (x then y), unlike CSS + // which accepts keyword pairs in either order. + return `${horizontal} ${vertical}`; }