We need to adapt the mobile screens to make them more user-friendly and OOUI compliant (right margins, spacing, font sizes…) :)
MOCKS
main screen (just for guidance, please find detailed specs in Figma – link below)
MAIN SPECS
Mobile font (headings): size: 16px; line-height: 20px; weight: 600
Mobile font (body): size: 16px; line-height: 24px
Header height: 50px (48+1+1)
"Publish changes" button size: 48px
Close button size: 48x48px (More specs in WiKit)
Input field: 40px
Horizontal and vertical margins: 16px
Find more specs and mobile screens in this Figma artboard.
Notes:
- mobile means width is below the current break point
Current checklist (checked means merged, but not necessarily verified):
- the font-size of everything that is body-S, i.e. 14px, on desktop, should be body-M, i.e. 16px on mobile (https://gerrit.wikimedia.org/r/575290)
- the bailout and permission error views are missing bullet points in front of the list items, but only on mobile, not on desktop (https://gerrit.wikimedia.org/r/575558)
- the bailout and permission error views should not have an extra 24px side border on mobile (https://gerrit.wikimedia.org/r/575574)
- the button on the bailout view should be a size L on mobile (https://gerrit.wikimedia.org/r/576014)
- The header should have an inner height of 48px + 2x 1px border (https://gerrit.wikimedia.org/r/576114)
- The close button should be 48px x 48px on mobile, the icon is unchanged (https://gerrit.wikimedia.org/r/576114)
- The Publish button should be a size XL on mobile, with the same font-size and line-height but more padding: 11px 16px 11px 16px; (https://gerrit.wikimedia.org/r/576113, https://gerrit.wikimedia.org/r/576114)
- The string data value textfield should have a height of 40px (including border) and a font-size of 16px (https://gerrit.wikimedia.org/r/575567)