Support safe area on mobile devices

[fflaten]

What version of starlight are you using?

0.6.0

What is your idea?

Update default styling to stretch beyond "safe area" on devices so styling is consistent on desktop and ex. mobile devices in landscape view.

Required changes:

• Include viewport-fit=cover in the viewport meta-tag
• Increase padding on body or .page + any fixed-positioned items like <header> to avoid conflicts with UI-elements/camera on devices
• Might need to adjust mobile/desktop breakpoints

CSS environment-variables named safe-area-inset-* exist to dynamically provide the correct padding-values per device.

Why is this feature necessary?

Copied from withastro/docs#2270. Same result in a new Starlight-project

On touch devices like iPhones, iPads etc. the website is padded by the browser to avoid content under UI-elements like the "slide for home screen"-bar, camera notch etc. In this area the gradient background is not visible and the website might also get double padding in some elements close to the edges.

Do you have examples of this feature in other projects?

• https://developer.mozilla.org/en-US/docs/Web/CSS/env#usage
• https://github.com/pester/docs/pull/234/files (example of similar adjustments in a Docusaurus-project)

Participation

• I am willing to submit a pull request for this issue.