After the responsive adjustments (T319181), the lists of suggestions, in-progress, and translated articles adapt to different screen sizes.
|Mobile|Tablet Vertical|Tablet Horizontal | Desktop|
|---|---|---|---|
|{F41523061, size=full}|{F41523064, size=full}|{F41523066, size=full}|{F41523068, size=full}|
Currently, the language pair selector to filter the list presents some issues about the (a) language pair position and (b) list of languages dialog adjustments
# A) Language pair position
For all screen sizes, it is shown in a separate line below the list header. This layout was only intended for narrow sizes. On other sizes, the selector is expected to be integrated in the list header.
Based on the specs from the responsive adjustments (T319181), the mockups below show the expected layout for the selector:
|Mobile|Tablet Vertical|Tablet Horizontal | Desktop|
|---|---|---|---|
|{F35568827, size=full}|{F37749930, size=full}|{F35568831, size=full}|{F35568834, size=full}|
# B) List of languages dialog adjustments
For sizes largest than narrow, the list of languages is shown as a dialog. Currently, it is not possible to close the dialog by taping outside. When the list of languages is shown as a dialog it is expected that an overlay with the standard style (Base20 (#54595D), Opacity: 85% ) is provided behind the dialog, and tapping on it closes the dialog.
List of languages responsive behaviour based on T253303:
|Wide screen|Narrow screen|
|---|---|
|{F32367551}|{F32367553}
### **Derived Requirements**
1. **Language Pair Selector Positioning:**
- On **narrow screens (mobile view)**, the language pair selector should be displayed **below** the list header.
- On **tablet vertical, tablet horizontal, and desktop views**, the language pair selector should be **integrated within the list header**, following the responsive adjustments in T319181.
2. **Language List Dialog Behavior:**
- For **wide screens (tablet horizontal and desktop)**, the list of languages should appear as a **dialog**.
- The dialog should have a **standard overlay** with the color **Base20 (#54595D) and 85% opacity**.
- **Tapping outside the dialog should close it**, ensuring a consistent UI behavior.
====Test Steps
__Test Case 1: Ensure Correct Positioning of the Language Pair Selector__
1. Open the **Translation Dashboard** on different screen sizes (mobile, tablet vertical, tablet horizontal, and desktop).
2. Observe the position of the **language pair selector**.
3. ✅❓❌⬜ **AC1:** Confirm that on **mobile**, the selector appears **below** the list header.
4. ✅❓❌⬜ **AC2:** Confirm that on **tablet vertical, tablet horizontal, and desktop**, the selector is **integrated within the list header**.
__Test Case 2: Validate Language List Dialog Behavior on Wide Screens__
1. Open the **Translation Dashboard** on a **tablet horizontal or desktop** screen.
2. Click on the **language pair selector** to open the **list of languages**.
3. ✅❓❌⬜ **AC3:** Confirm that the **list of languages appears as a dialog** with a **dark overlay (Base20 #54595D, 85% opacity)**.
4. ✅❓❌⬜ **AC4:** Tap **outside the dialog** and confirm that it **closes correctly**.