fix: table collection padding calculation #603

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

Jump to bottom

Open

alaycock wants to merge 1 commit into NotionX:master

from alaycock:fix-collection-spacing

Open

fix: table collection padding calculation #603

alaycock wants to merge 1 commit into NotionX:master from alaycock:fix-collection-spacing

Conversation

@alaycock

Copy link

Contributor

@alaycock alaycock commented Jan 12, 2025 •

edited

Loading

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

@vercel

Copy link

vercel bot commented Jan 12, 2025 •

edited

Loading

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