Keep language RTL marker on the first picker line

Place the nonwrapping direction marker beside the language name inside the main line, preserving the separate regional row. Add layout regressions for both UI directions and non-RTL entries. Focused Node checks pass; browser regression is syntax checked but not executed.

Thanks to xet7.

client/components/main/popup.css

@@ -1345,3 +1345,10 @@ body.mobile-mode .pop-over .content-wrapper {
   overflow: auto;
   padding-bottom: 20px;
 }
+
+/* Keep the direction marker with its language name, never in the region row. */
+.pop-over[data-popup='changeLanguagePopup'] .language-rtl {
+  flex: 0 0 auto;
+  white-space: nowrap;
+  unicode-bidi: isolate;
+}

client/components/users/userHeader.jade

@@ -247,6 +247,8 @@ template(name="changeLanguagePopup")
             span.language-main-line
               span.emoji-icon.language-flags(dir="ltr" aria-hidden="true") {{languageFlag}}
               bdi.language-name {{languageName}}
+              if rtl
+                span.language-rtl(dir="ltr") (RTL)
             if countryFlag
               span.language-region
                 | (
@@ -255,8 +257,6 @@ template(name="changeLanguagePopup")
                   |  
                   bdi {{regionName}}
                 | )
-          if rtl
-            |  (RTL)
           if isCurrentLanguage
             i.fa.fa-check
 

tests/changeLanguageColumns.test.cjs

@@ -92,3 +92,9 @@ assert.match(block(".pop-over[data-popup='changeLanguagePopup'] .language-label"
 assert.match(block(".pop-over[data-popup='changeLanguagePopup'] .pop-over-list li > a"), /overflow: visible/);
 assert.match(block(".pop-over[data-popup='changeLanguagePopup'] .pop-over-list li > a"), /white-space: normal/);
 assert.match(jade, /span\.language-main-line\n\s+span\.emoji-icon\.language-flags/);
+
+const mainLine = jade.split('span.language-main-line')[1].split('            if countryFlag')[0];
+assert.match(mainLine, /bdi\.language-name[\s\S]*?if rtl\n\s+span\.language-rtl\(dir="ltr"\) \(RTL\)/);
+assert.doesNotMatch(jade, /\n          if rtl\n/, 'RTL marker must not be a separate flex item beside the two-line label');
+assert.match(block(".pop-over[data-popup='changeLanguagePopup'] .language-rtl"), /white-space: nowrap/);
+assert.match(block(".pop-over[data-popup='changeLanguagePopup'] .language-rtl"), /flex: 0 0 auto/);

tests/playwright/specs/50-language-popup.e2e.js

@@ -35,6 +35,16 @@ for (const direction of ['ltr', 'rtl']) {
       await expect(entry.locator('.language-flags')).toHaveText(language);
       await expect(entry.locator('.language-region .language-country-flag')).toHaveText(country);
     }
+    const hebrew = popup.locator('.js-set-language[data-language="he-IL"]');
+    await expect(hebrew.locator('.language-main-line .language-rtl')).toHaveText('(RTL)');
+    await expect(hebrew.locator('.language-region .language-rtl')).toHaveCount(0);
+    await expect(popup.locator('.js-set-language[data-language="en-BR"] .language-rtl')).toHaveCount(0);
+    const marker = await hebrew.locator('.language-rtl').boundingBox();
+    const firstLine = await hebrew.locator('.language-main-line').boundingBox();
+    const secondLine = await hebrew.locator('.language-region').boundingBox();
+    expect(marker.y).toBeLessThan(secondLine.y);
+    expect(marker.height).toBeLessThanOrEqual(firstLine.height);
+    expect(await hebrew.locator('.language-rtl').evaluate(el => el.scrollWidth <= el.clientWidth)).toBe(true);
     const brazil = popup.locator('.js-set-language[data-language="en-BR"]');
     await expect(brazil.locator('.language-name')).toHaveText('English');
     await expect(brazil.locator('.language-region bdi')).toHaveText('Brazil');