Content is cut off on iPadOS Safari due to improper use of `100vh` and `h-screen`

Bug Description

Hello!

On iPadOS Safari (there are dozens of us!), the viewport has a variable height depending on whether the user has either scrolled the page or explicitly minimised the tab bar. Unfortunately, Safari computes the vh unit based on the largest size of the viewport, meaning the default view cuts off content at the bottom of the page:

The correct solution in modern implementations, especially for web apps, is to use the dvh unit instead of the vh unit. PostHog uses vh somewhat extensively, and this may be tricky to fix, especially because there are already monkey-patches around iOS Safari (which, FWIW, dvh would fix):

https://github.com/PostHog/posthog/blob/6beac9bde639f46c3a87db7ca5409a14369820e8/frontend/src/layout/navigation-3000/Navigation.scss#L41-L45

That’s not all—h-screen from Tailwind should be replaced with h-dvh.

For the main navigation, I was able to patch this with the following Userscript:

@layer base {
  *[class*="h-screen"] {
    height: 100dvh !important;
  }

  *[class*="min-h-screen"] {
    min-height: 100dvh !important;
  }

  *[class*="max-h-screen"] {
    max-height: 100dvh !important;
  }
}

.app-layout, .SidePanel3000__bar, .SidePanel3000__content {
  height: 100dvh !important;
}

The @layer base sections adds enough specificity to override Tailwind, which is used in the left sidebar (project panel). .app-layout handles the main content, and .SidePanel3000__bar handles the right side panel.

I would submit a PR for this if there was a clear fix, but I suspect doing so might tread on toes. I thought at least it would be useful to have an issue standing for it with a working Userstyle for future users. If you have a clean proposed fix, however, I’d be absolutely happy to PR it for you; consider it thanks for offering a generous free tier :)

Debug info

Start by searching the frontend for 100vh, h-screen, min-h-screen, and max-h-screen, then inspect Navigation.scss and sidepanel/SidePanel.scss, including the referenced .app-layout and side-panel rules. Test the navigation and panels in iPadOS Safari with the tab bar shown and minimized. Done means relevant viewport sizing uses dynamic viewport units without cutting off content or breaking other layouts.