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

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',