style(notion-page-scroller): change min-height

[luckfunc]

Description

• After cloning the react-notion-x project from GitHub and launching it locally, I switched the Page Id to "2a3890eac9624780abf5d08b534d050b" and identified the issue.

When I use the Page Id "2a3890eac9624780abf5d08b534d050b" to access the homepage, if the page content exceeds the height of the screen, it looks fine. However, when the page content doesn't exceed the height of the screen, it appears to have some issues.

• for example

  • It is displaying an extra scrollbar.

• Reproduce the issue.

  1. Open Chrome Developer Tools.
  2. You can select the element below in the Developer Tools and then delete it. After deleting, the content will be smaller than your screen height, and a scrollbar will appear.

     <main class="notion-page notion-page-has-cover notion-page-has-icon notion-page-has-text-icon notion-full-page notion-small-text">
     </main>

     

  3. You will find that the page looks as shown in the following image:
  4. After finding the element with the class name "notion-page-scroller" and setting min-height: calc(100% - var(--notion-header-height)), it will look like the image below: .he scrollbar has disappeared.

     I think

  5. I believe that when the page content is minimal, the height should be the same as the webpage's height, and a scrollbar should not appear.
  6. If this is your design intention, please reject my pull request.

     Notion Test Page ID

• Test Page ID: "2a3890eac9624780abf5d08b534d050b"

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
react-notion-x	✅ Ready (Inspect)	Visit Preview	Aug 13, 2023 6:25pm
react-notion-x-minimal-demo	✅ Ready (Inspect)	Visit Preview	Aug 13, 2023 6:25pm

[luckfunc]

Deleting the `

` element from Next.js Examples will also result in the same issue of a scrollbar appearing when the content is smaller than the webpage height. As shown in the image below: