Add support for mobile safe areas

[HiDeoo]

What kind of changes does this PR include?

• Changes to Starlight code

Description

• Closes Support safe area on mobile devices #433.

This pull request is an attempt to add support for mobile safe areas to Starlight. It is a draft for two main reasons:

• I think it would be nice to have more people test it as I don't have that many devices with notches to test it on, and it's fairly easy to forget some edge cases.
• As mentioned in Support safe area on mobile devices #433, we may want to tweak some breakpoints.

To talk a bit about the changes, the syntax to support mobile safe areas is pretty verbose and it's even more verbose when we use some logical CSS properties as there is no equivalent for the safe area inset properties, they are only physical.

When dealing with safe areas I always refer to this blog post that was released by the Webkit team when the iPhone X with its notch was released which I think does a good job at explaining how it works so sharing it here in case it can be useful and I also included it in the changeset.

Here are some screenshots from a device with a notch, starting with the home page:

Before	After

A doc page:

Before	After

A doc page with the toc opened:

Before	After

Even if we somehow forget some edge cases, I think it'll be nice to have support for this in Starlight and we can always fix the edge cases when we find them.

[changeset-bot]

🦋 Changeset detected

Latest commit: 4fca751

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@astrojs/starlight	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for astro-starlight ready!

Name	Link
🔨 Latest commit	4fca751
🔍 Latest deploy log	https://app.netlify.com/sites/astro-starlight/deploys/64ce57b00641c50007bbf2c3
😎 Deploy Preview	https://deploy-preview-436--astro-starlight.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[fflaten]

Thank you for looking into this so quickly!

If only the device emulator in Chromium included option for safe area. So painful to use physical devices for testing this. Please let me know if there's an option I haven't found yet :)

[HiDeoo]

If only the device emulator in Chromium included option for safe area. So painful to use physical devices for testing this. Please let me know if there's an option I haven't found yet :)

Yeah, this is a pain. The only other "option" I have found for iOS is having a mac, installing the huge bundle that is Xcode just to get the iOS emulators, cry at every update that it takes forever to update, run manually an emulator for a device with a notch, start Safari on the simulator and visit the webpage.

[delucis]

Thanks for tackling this @HiDeoo! Yeah, I also have no devices with a notch and will have to open up the iOS simulator. Pretty gross that this requires SO MUCH CSS for their dumb design flaw 😅

Haven’t had a chance to dive in to the code in detail yet, so this may not work, but one trick I sometimes reach for when media queries are getting out of hand like this is to see if there’s a way to move things into a reusable custom property, e.g. this kind of concept:

:root {
  /* default value */
  --some-prop: 1rem;
}

@media (prefers-notchy-screen: true) {
  :root {
    /* value when condition is met */
    --some-prop: 1.5rem;
  }
}

Then in most styles you just use your value without worrying about media queries. Maybe that could help conciseness here too.

[HiDeoo]

Excellent tip, I'll make a second pass tomorrow now that I have identified most of areas requiring changes and see if we can apply this in some of these cases.

[HiDeoo]

So I made a second pass at this and tried to apply the trick you mentioned.

It works relatively well for elements that span the entire width of the screen so I managed to reduce the number of changes for the header for example. Altho, I don't think it scales well for other elements where we need to know if it's on the left on the right based on the direction, so rely on :global([dir='ltr']) and :global([dir='rtl']) to specifically adjust either the padding-left or padding-right values with either env(safe-area-inset-left) or env(safe-area-inset-right). This would be so much easier with logical values.

I also found a part of the UI that I missed in my first pass (I updated the screenshot in the initial post), so I think the overall number of changes is pretty much the same 😢

I may try a third pass in a few days as these safe areas have a tendency to mess with my brain 😅

[HiDeoo]

Third pass done 😅

I managed to remove most @supports (padding: max(0px)) directives and only keep a single one in packages/starlight/style/props.css. It only hit me today that I could move some media queries to this file nested in this directive even tho I was already doing that in some components ^^ I guess the step back helped.

All references to env(safe-area-inset-*) and max() are properly located in this file and in this @supports directive so we should not hit any issues with some older browsers not supporting those.

We still have to rely unfortunately a lot more than before on :global([dir='rtl']) at various places and this is one thing I don't know how to avoid.

I also refactored some previous changes I introduced to reduce the number of changes overall and fix a padding that I previously forgot to adjust.

I think at this point I'll open this for review as I think I need some other eyes to look at this ^^ I'll be happy tho to fix any issue or places that I may have missed or try other approaches if some of you have other ideas.