react-notion-x icon indicating copy to clipboard operation
react-notion-x copied to clipboard

Published 20 hours ago • verified publisher icon NotionX

fix: table collection padding calculation

Open alaycock opened this issue 10 months ago • 1 comments
trafficstars

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

alaycock avatar Jan 12 '25 18:01 alaycock

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

vercel[bot] avatar Jan 12 '25 18:01 vercel[bot]