Improve form screens layout

Summary/TL;DR

  1. Improve form screens layout
  2. Add autofocus on single text inputs

Detailed description

From https://gitlab.com/Misakey/admin-frontend/merge_requests/7#note_208093677

Improve the position of elements in a form page like that:

image

Align Navigation block with form block inside a container

Here in the sketch, the text field isn't centered verticaly:

image

Do no center form horizontally

Use google account personal info page as example

Steps to do the task

1.layout

  • In form screens, wrap bot navigation and form into a material-ui <Container maxWidth="sm">
  • Check form is not centered horizontally
  • Check global padding is ok
  • Remove left padding from <Navigation>
  1. autofocus
  • add autoFocus prop to Field
Edited by Ghost User