fix: corrects localizer positioning in RTL mode (#9494)

### What?
Localizer's RTL code was not being applied, to shift it's position to
the left side of the screen when the user's account/admin locale was set
to a RTL language.

Before:

![before](https://github.com/user-attachments/assets/54a96087-2b40-46ed-a55b-2b08438e9b84)

After:

![after](https://github.com/user-attachments/assets/4ad6e3f0-b229-4446-8d61-c0a4034bd520)


### How?
Moved css class to ensure existing css code did not face issues with
inheritance.

Fixes #9482

packages/ui/src/elements/AppHeader/index.scss

@@ -11,12 +11,6 @@
       display: none;
     }
 
-    // place the localizer outside the `overflow: hidden` container so that the popup is visible
-    // this means we need to use a placeholder div so that the space is retained in the DOM
-    [dir='rtl'] &__localizer {
-      right: unset;
-      left: base(4.5);
-    }
     &__localizer.localizer {
       position: absolute;
       top: 50%;
@@ -24,6 +18,13 @@
       transform: translate3d(0, -50%, 0);
     }
 
+    // place the localizer outside the `overflow: hidden` container so that the popup is visible
+    // this means we need to use a placeholder div so that the space is retained in the DOM
+    [dir='rtl'] &__localizer {
+      right: unset;
+      left: base(4.5);
+    }
+
     &__localizer-spacing {
       visibility: hidden;
     }

test/localization-rtl/config.ts

@@ -2,9 +2,13 @@ import { fileURLToPath } from 'node:url'
 import path from 'path'
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
+import { ar } from '@payloadcms/translations/languages/ar'
+import { de } from '@payloadcms/translations/languages/de'
+import { en } from '@payloadcms/translations/languages/en'
+import { es } from '@payloadcms/translations/languages/es'
+
 import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
 import { devUser } from '../credentials.js'
-import { ar } from './ar.js'
 import { Posts } from './collections/posts.js'
 import { Users } from './collections/users.js'
 import deepMerge from './deepMerge.js'
@@ -38,6 +42,14 @@ export default buildConfigWithDefaults({
     defaultLocale: 'en',
     fallback: true,
   },
+  i18n: {
+    supportedLanguages: {
+      ar,
+      en,
+      es,
+      de,
+    },
+  },
   onInit: async (payload) => {
     await payload.create({
       collection: 'users',