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

fix: table collection padding calculation #603

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

Conversation

alaycock
Copy link

@alaycock alaycock commented Jan 12, 2025

Description

The padding calculation for a "table collection" is incorrect for pages with a width other than 708. The renderer should allow this to be overridden. For example, your own site uses 900px for --notion-max-width.

My proposed fix is to pass in a pageWidth property to the renderer. An alternative would be to query the width of the div.notion-page-content element on the page. This felt less intrusive.

Screenshot: Over-calculated padding, due to the default page width image

This PR solves also two more bugs impacting the padding calculation:

  • useWindowSize, using window.width, includes the scrollbar width as part of the page width. Instead, document.documentElement.clientWidth can be used for just the document width.
  • The calculation for padding on narrow screens under is off-by-one 1vw on each side.
The table is too wide on narrow screens, caused by the additional two bugs above image

Notion Test Page ID

https://adaminthehills.notion.site/Hi-I-m-Adam-164d424ea49f80c9b216c4425ca573c8?pvs=4

Copy link

vercel bot commented Jan 12, 2025

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

Name Status Preview Updated (UTC)
react-notion-x ✅ Ready (Inspect) Visit Preview Jan 13, 2025 3:08am
react-notion-x-minimal-demo ✅ Ready (Inspect) Visit Preview Jan 13, 2025 3:08am

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.

1 participant