From 2ced9db58d0f61c14965aef1c56a36d42e37d544 Mon Sep 17 00:00:00 2001
From: Luca Marsella <34103646+marsluca@users.noreply.github.com>
Date: Wed, 28 Oct 2026 09:43:13 +0100
Subject: [PATCH] Open masthead dropdowns towards the page in RTL locales

The masthead dropdowns used popper position "right", which PatternFly
keeps physical. In RTL the toggles sit near the left edge, so the Help
menu opened past the left edge of the screen. Use "end", which follows
the text direction. LTR placement is unchanged.

Closes #54359

Signed-off-by: Luca Marsella <34103646+marsluca@users.noreply.github.com>
---
 .../components/help-enabler/HelpHeader.tsx    |  2 +-
 js/apps/admin-ui/test/masthead/main.spec.ts   | 45 +++++++++++++++++++
 .../src/masthead/KeycloakDropdown.tsx         |  2 +-
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/js/apps/admin-ui/src/components/help-enabler/HelpHeader.tsx b/js/apps/admin-ui/src/components/help-enabler/HelpHeader.tsx
index 4e1dfe3ebc2d..ae63b33a4d61 100644
--- a/js/apps/admin-ui/src/components/help-enabler/HelpHeader.tsx
+++ b/js/apps/admin-ui/src/components/help-enabler/HelpHeader.tsx
@@ -50,7 +50,7 @@ export const HelpHeader = () => {
   return (
     <Dropdown
       popperProps={{
-        position: "right",
+        position: "end",
       }}
       onOpenChange={(isOpen) => setOpen(isOpen)}
       isOpen={open}
diff --git a/js/apps/admin-ui/test/masthead/main.spec.ts b/js/apps/admin-ui/test/masthead/main.spec.ts
index 4257f103087d..7aec2dd3986c 100644
--- a/js/apps/admin-ui/test/masthead/main.spec.ts
+++ b/js/apps/admin-ui/test/masthead/main.spec.ts
@@ -118,4 +118,49 @@ test.describe.serial("Masthead tests", () => {
       await assertAxeViolations(page);
     });
   });
+
+  test.describe.serial("Right-to-left view", () => {
+    const realmName = `test-realm-${uuid()}`;
+    const username = `test-user-${uuid()}`;
+
+    test.beforeAll(async () => {
+      await adminClient.createRealm(realmName, {
+        enabled: true,
+        internationalizationEnabled: true,
+        supportedLocales: ["en", "ar"],
+      });
+      const { id } = await adminClient.createUser({
+        realm: realmName,
+        username,
+        enabled: true,
+        emailVerified: true,
+        credentials: [{ type: "password", value: "test" }],
+        firstName: "Test",
+        lastName: "User",
+        email: "test@keycloak.org",
+        attributes: { locale: ["ar"] },
+      });
+      await adminClient.addClientRoleToUser(
+        id!,
+        "realm-management",
+        ["realm-admin"],
+        realmName,
+      );
+    });
+
+    test.afterAll(() => adminClient.deleteRealm(realmName));
+
+    test("Help menu opens inside the viewport", async ({ page }) => {
+      await logout(page);
+      await login(page, { realm: realmName, username, password: "test" });
+      await expect(page.locator("html")).toHaveAttribute("dir", "rtl");
+      await clickGlobalHelp(page);
+      const menu = page.getByRole("menu");
+      // Popper sets this attribute once the menu is in its final position
+      await expect(
+        page.locator("[data-popper-placement]", { has: menu }),
+      ).toBeVisible();
+      await expect(menu).toBeInViewport({ ratio: 1 });
+    });
+  });
 });
diff --git a/js/libs/ui-shared/src/masthead/KeycloakDropdown.tsx b/js/libs/ui-shared/src/masthead/KeycloakDropdown.tsx
index d5ecd1cadf7d..16cd84dfdc2b 100644
--- a/js/libs/ui-shared/src/masthead/KeycloakDropdown.tsx
+++ b/js/libs/ui-shared/src/masthead/KeycloakDropdown.tsx
@@ -26,7 +26,7 @@ export const KeycloakDropdown = ({
     <Dropdown
       {...rest}
       popperProps={{
-        position: "right",
+        position: "end",
       }}
       onOpenChange={(isOpen) => setOpen(isOpen)}
       toggle={(ref) => (