Skip to main content

Final content of ToS and privacy policy not visible on mobile

Bug Reports

Go to one of the following pages, on mobile:

https://t3.chat/terms-of-service

https://t3.chat/privacy-policy

Scroll to the bottom of the page. On mobile, the content is cut off near the end on Chrome and Firefox (the content overflows the scrollable view).

The diagnosis of gpt-5.6-sol medium:

The page uses a nested scroll container inside a fixed viewport shell:
```html
 <div class="flex h-screen ...">
   <main class="flex-1 overflow-y-auto ...">
     <div class="h-full ...">
```
Meanwhile, body has overflow: hidden. On mobile, h-screen becomes 100vh, which represents the large viewport and can extend behind the browser’s address/tab bars. Because the document cannot scroll, the browser UI cannot compensate; the bottom of the inner scroller ends beneath that UI.

Status: Completed1 comment

Log in to comment and vote

Comments1

  • Tan Peach

    The suggested fix by gpt-5.6-sol medium:

    - <div className="flex h-screen w-full flex-col">
+ <div className="flex h-dvh w-full flex-col">

- <main className="flex-1 overflow-y-auto">
+ <main className="min-h-0 flex-1 overflow-y-auto">

- <div className="mx-auto h-full max-w-5xl">
+ <div className="mx-auto min-h-full max-w-5xl">


    Also give the article safe-area-aware bottom padding:
    ```
     padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    ```

    But I think the main issue is `h-screen`, that should be `h-dvh` instead.