Add more space between the bottom of the layout and sticky footer

Is your proposal related to a problem?

When using the admin editing interface on mobile or desktop devices it is hard to reach the buttons at the end of a page as they are so close to the main page actions.

Describe the solution you’d like

Just add some margin to the bottom so the last editing fields do not stick to the bottom edge of the screen.

This applies to all admin views, so this should be added in the basic layout file.

Describe alternatives you’ve considered

None

Additional context

• Using safari on iPhone
• It is a problem on all devices

Adding padding-bottom: 10rem; to .content appears to be close - but check if that fixes the problem on various device sizes without being too large.

Note the larger ‘purple’ padding block and the highlighted added CSS.

[mohammadareeb95]

Safari

https://user-images.githubusercontent.com/77102111/197854555-e1f1938f-da7f-4ca3-b1e3-7cf76d9ff539.mp4

Chrome

https://user-images.githubusercontent.com/77102111/197859471-9892f803-ce95-4ea8-8eef-35c2d8031b8a.mp4

Firefox

https://user-images.githubusercontent.com/77102111/197859574-d174eca7-a7ee-48a4-949b-405a22c101d3.mp4

• I can confirm that very quick scroll in Safari bumps back and hides the save draft button. But, I also noticed this behaviour on Tab refresh. Meaning if I try to scroll very quickly another time, it doesn’t bump back. On the contrary, if I refresh or load the page again, bumping can be visible.
• This behaviour is not found in Chrome or Firefox

[thibaudcolas]

Hi folks, no need for you to ask – just show us you understand the problem, explain what you intend to do, and you can get going with making a pull request. It’s better if only one person works on a given problem at a time, so this is normally first-come-first-served.