If you’re not familiar, Safari on macOS and iPadOS supports compact tabs in Safari, which lets the top of the screen bleed up into the UI chrome, similar to how the top of a page bleeds into the status bar in PWA mode in iOS/iPadOS. Because I’m using the theme color to match the top of the page, I want to round the corners of my sidebar so it’s not just a flat edge.
Example of the look I’m going for (see the border radius atop the green sidebar):
However, for normal tabs, it’d look better without this border radius.
I already use JS/CSS to scope this to just PWAs (detected with window.matchMedia && window.matchMedia('(display-mode: standalone)').matches), but I’m wondering if Apple has exposed a way to determine if the user has compact tabs enabled.
Since the feature isn’t on by default and it’s lesser-known, I wonder if this is possible and just isn’t documented because I am, in fact, the first person to care about this.