From 59f317a7f2a97d5de435ec38a42152d06afaba01 Mon Sep 17 00:00:00 2001 From: Alberto Dainotti Date: Fri, 9 Jan 2026 09:59:18 -0500 Subject: [PATCH 1/4] remove manual calculations of width, padding relative to window size (let css handle it) --- .../src/third-party/collection.tsx | 84 ++++++++++--------- 1 file changed, 43 insertions(+), 41 deletions(-) diff --git a/packages/react-notion-x/src/third-party/collection.tsx b/packages/react-notion-x/src/third-party/collection.tsx index 5e5ff574..59d4a7cb 100644 --- a/packages/react-notion-x/src/third-party/collection.tsx +++ b/packages/react-notion-x/src/third-party/collection.tsx @@ -17,9 +17,7 @@ import { CollectionViewIcon } from '../icons/collection-view-icon' import { cs } from '../utils' import { CollectionRow } from './collection-row' import { CollectionView } from './collection-view' -import { useLocalStorage, useWindowSize } from './react-use' - -const isServer = !globalThis.window +import { useLocalStorage } from './react-use' export function Collection({ block, @@ -27,9 +25,9 @@ export function Collection({ ctx }: { block: - | types.CollectionViewBlock - | types.CollectionViewPageBlock - | types.PageBlock + | types.CollectionViewBlock + | types.CollectionViewPageBlock + | types.PageBlock className?: string ctx: NotionContext }) { @@ -116,10 +114,10 @@ function CollectionViewBlock({ [collectionState, setCollectionState] ) - let { width: windowWidth } = useWindowSize() - if (isServer) { - windowWidth = 1024 - } + // let { width: windowWidth } = useWindowSize() + // if (isServer) { + // windowWidth = 1024 + // } const collection = getBlockValue(recordMap.collection[collectionId]) const collectionView = getBlockValue( @@ -127,44 +125,48 @@ function CollectionViewBlock({ ) const collectionData = recordMap.collection_query[collectionId]?.[collectionViewId] - const parentPage = getBlockParentPage(block, recordMap) + // const parentPage = getBlockParentPage(block, recordMap) const { width, padding } = React.useMemo(() => { const style: React.CSSProperties = {} - if (collectionView?.type !== 'table' && collectionView?.type !== 'board') { - return { - style, - width: 0, - padding: 0 - } - } - - const width = windowWidth - // TODO: customize for mobile? - const maxNotionBodyWidth = 708 - let notionBodyWidth = maxNotionBodyWidth - - if (parentPage?.format?.page_full_width) { - notionBodyWidth = Math.trunc(width - 2 * Math.min(96, width * 0.08)) - } else { - notionBodyWidth = - width < maxNotionBodyWidth - ? Math.trunc(width - width * 0.02) // 2vw - : maxNotionBodyWidth - } - - const padding = - isServer && !isMounted ? 96 : Math.trunc((width - notionBodyWidth) / 2) - style.paddingLeft = padding - style.paddingRight = padding + // The logic below was forcing window-relative centering which breaks when + // the collection is inside a constrained container (standard Notion page). + // Relying on CSS layout is safer. + + // if (collectionView?.type !== 'table' && collectionView?.type !== 'board') { + // return { + // style, + // width: 0, + // padding: 0 + // } + // } + + // const width = windowWidth + // // TODO: customize for mobile? + // const maxNotionBodyWidth = 708 + // let notionBodyWidth = maxNotionBodyWidth + + // if (parentPage?.format?.page_full_width) { + // notionBodyWidth = Math.trunc(width - 2 * Math.min(96, width * 0.08)) + // } else { + // notionBodyWidth = + // width < maxNotionBodyWidth + // ? Math.trunc(width - width * 0.02) // 2vw + // : maxNotionBodyWidth + // } + + // const padding = + // isServer && !isMounted ? 96 : Math.trunc((width - notionBodyWidth) / 2) + // style.paddingLeft = padding + // style.paddingRight = padding return { style, - width, - padding + width: undefined, + padding: 0 } - }, [windowWidth, parentPage, collectionView?.type, isMounted]) + }, []) // Remove dependencies as we use defaults // console.log({ // width, @@ -252,7 +254,7 @@ function CollectionViewTabs({ className={cs( 'notion-collection-view-tabs-content-item', collectionViewId === viewId && - 'notion-collection-view-tabs-content-item-active' + 'notion-collection-view-tabs-content-item-active' )} > Date: Sun, 8 Mar 2026 11:58:14 -0400 Subject: [PATCH 2/4] fix: use 100% instead of 100vw for table and board collection widths Tables and boards were using 'width: 100vw' which forced them to span the full viewport, breaking page container margins. Changed to 100% so they respect their parent container's width while still scrolling horizontally via 'overflow: auto hidden' when content overflows. --- packages/react-notion-x/src/styles.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-notion-x/src/styles.css b/packages/react-notion-x/src/styles.css index b6115aed..927aa71d 100644 --- a/packages/react-notion-x/src/styles.css +++ b/packages/react-notion-x/src/styles.css @@ -1576,8 +1576,8 @@ svg.notion-page-icon { } .notion-table { - width: 100vw; - max-width: 100vw; + width: 100%; + max-width: 100%; align-self: center; overflow: auto hidden; } @@ -1986,8 +1986,8 @@ svg.notion-page-icon { } .notion-board { - width: 100vw; - max-width: 100vw; + width: 100%; + max-width: 100%; align-self: center; overflow: auto hidden; } From f1600bf6834128ae69f9dc0c0d459bb6f08cf40d Mon Sep 17 00:00:00 2001 From: Alberto Dainotti Date: Sun, 8 Mar 2026 12:58:17 -0400 Subject: [PATCH 3/4] fix: constrain .notion-collection width to prevent table overflow The .notion-collection wrapper had no max-width or overflow constraint, so tables with wide columns (floated content) would push it beyond the page container. Adding max-width: 100% and overflow: auto keeps it within bounds while enabling horizontal scroll. --- packages/react-notion-x/src/styles.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-notion-x/src/styles.css b/packages/react-notion-x/src/styles.css index 927aa71d..bee9c751 100644 --- a/packages/react-notion-x/src/styles.css +++ b/packages/react-notion-x/src/styles.css @@ -1512,6 +1512,8 @@ svg.notion-page-icon { .notion-collection { align-self: center; min-width: 100%; + max-width: 100%; + overflow: auto; } .notion-collection-header { From 3cc922a6897d24af407abc64ecafe47a156b2ff5 Mon Sep 17 00:00:00 2001 From: Alberto Dainotti Date: Sun, 8 Mar 2026 13:42:48 -0400 Subject: [PATCH 4/4] fix: add padding to .notion-collection to prevent card shadow clipping The overflow:auto clips gallery card box-shadows at the edges. Adding padding with compensating negative margin gives shadows room to render without shifting the layout. --- packages/react-notion-x/src/styles.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-notion-x/src/styles.css b/packages/react-notion-x/src/styles.css index bee9c751..4eebf0b3 100644 --- a/packages/react-notion-x/src/styles.css +++ b/packages/react-notion-x/src/styles.css @@ -1514,6 +1514,8 @@ svg.notion-page-icon { min-width: 100%; max-width: 100%; overflow: auto; + padding: 4px; + margin: -4px; } .notion-collection-header {