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 <noreply@anthropic.com>

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);

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}`;
 }