App layout exceeds viewport height (iPad/Safari)
Describe the bug On iPad (Safari), the app layout is taller than the visible viewport, so part of the interface is always cut off. When the browser tab/toolbar is visible, the bottom bar of the sidebar (user avatar + notifications) is hidden below the fold. If I drag the page to scroll the browser chrome away, the bottom becomes visible but the top bar (base name, search, sidebar toggle) disappears above the fold instead.
The whole page scrolls as a document, which it shouldn't – the app should fit the viewport exactly and only scroll inside its own panes.
To Reproduce Steps to reproduce the behavior:
- Open a base in Safari on an iPad (portrait or landscape)
- Look at the sidebar – the bottom row with the user avatar and notification bell is cut off by the bottom edge of the screen
- Drag the page downwards/upwards to scroll it
- The Safari toolbar hides and the bottom row appears, but now the top row (base name, search icon, sidebar toggle) is scrolled out of view
Expected behavior The app should always fit within the visible viewport on iPad, with both the top and the bottom bar reachable at the same time and no page-level scrolling – the same way it behaves on desktop.
Screenshots https://github.com/user-attachments/assets/df1666e8-3b7e-4445-a136-39f415656929
Client
- OS: iPadOS 26.6.2
- Browser: Safari
Platform Docker self-hosted
Additional context
Looks like the layout root is sized with 100vh (or a height: 100% chain based on it). On iOS/iPadOS Safari, 100vh equals the viewport height without the browser toolbar, so the layout ends up taller than the actually visible area. Using 100dvh (with a 100vh fallback), or -webkit-fill-available, plus overscroll-behavior: none on the root to prevent page-level scrolling, usually fixes this.
Source: teableio/teable