Looking at the initial implementation of the language selector (T253303) available for Section Translation at test wiki, items in the list of languages need some adjustments:
- Adjust item dimensions. Items should use an 8px padding on all sides except their start (32px), and have 4px margin between columns (when displayed as a dialog, in wider screens). Currently items have 4px padding on all sides except the start (32px) and some additional unexpected margins on top and after the element. See images of the inspected elements and the spec below. (See T287888#7361404 for the aspects missing)
- Cursor on hover. Hovering a language of the list should use the "pointer" cursor (a hand communicating interactivity).
| Inspected padding and margin | Spec |
|---|---|
Pending aspects:
- For bigger screens, the dialog box still stretches out. For wider screens the dialog does not need to stretch further.
- On a narrow screen the separation between columns of items (in 3 column layout) is larger than the intended 4px. This can be fixed by not applying the max-width constraint in the .mw-ui-language-selector .language CSS rule. In this way items can expand to fill the column.
- The breakpoints may need adjustment since the narrow screen mode seems to be used for window sizes that does not seem so narrow.
- Labels for language items are not aligned with the text in the search bar. The measurements in the spec should result in the text for the search bar and the language to follow a straight vertical scan line. However there seems to be some unintended padding/margin there making it not to be the case: