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)
{F31613104}
**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 [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit-%F0%9F%94%A5?node-id=351%3A45 | in WiKit) ]]
Input field: 40px
Horizontal and vertical margins: 16px
Find more specs and mobile screens in [[ https://www.figma.com/file/KIkcQ7NjOl8OkQtGWe5duIbW/Wikidata-Bridge?node-id=2197%3A14669 | this Figma artboard ]].
**Notes:**
* mobile means width is below the current break point
Current checklist:
[ ] 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
[ ] the button on the bailout view should be a size L on mobile
[ ] The header should have an inner height of 48px + 2x 1px border
[ ] The close button should be 48px x 48px on mobile, the icon is unchanged
[ ] The Publish button should be a size XL on mobile, with the same font-size and line-height but more `padding: 12px 16px 12px 16px;`
[ ] The string data value textfield should have a height of 40px (including border) and a font-size of 16px