Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

luckfunc
Copy link

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.
      1691948459890
  • 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>
    1691949522001
    3. You will find that the page looks as shown in the following image:
    uTools_1691949787823
    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:
    image.he scrollbar has disappeared.

I think

  1. 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.
  2. If this is your design intention, please reject my pull request.

Notion Test Page ID

  • Test Page ID: "2a3890eac9624780abf5d08b534d050b"

@vercel
Copy link

vercel bot commented Aug 13, 2023

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
Copy link
Author

Deleting the `

` element from [Next.js Examples](https://react-notion-x-minimal-demo-kvao5xji7-saasify.vercel.app) 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: ![image](https://github.com/NotionX/react-notion-x/assets/85545304/3a3f9d2a-9eb5-43cd-aec2-5fed303497e8)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant