🦋 Changeset detected

Latest commit: 4fca751

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

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

✅ 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.

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 :)

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.

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.

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.

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 😅

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.