Skip to content

Conversation

alaycock
Copy link
Contributor

@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