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 |
|---|---|---|---|
 |  |  |  |
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 |
|---|---|---|---|
 |  |  |  |
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 |
|---|---|
 |  |
Derived Requirements
- 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.
- 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
- Open the Translation Dashboard on different screen sizes (mobile, tablet vertical, tablet horizontal, and desktop).
- Observe the position of the language pair selector.
- ✅❓❌⬜ AC1: Confirm that on mobile, the selector appears below the list header.
- ✅❓❌⬜ 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
- Open the Translation Dashboard on a tablet horizontal or desktop screen.
- Click on the language pair selector to open the list of languages.
- ✅❓❌⬜ AC3: Confirm that the list of languages appears as a dialog with a dark overlay (Base20 #54595D, 85% opacity).
- ✅❓❌⬜ AC4: Tap outside the dialog and confirm that it closes correctly.
QA Results - Test Wiki & Local
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T351734#10589370 |
| 2 | ✅ | T351734#10589370 |
| 3 | ✅ | T351734#10778048 |
| 4 | ✅ | T351734#10589370 |
