Fix collection spacing

Author: alaycock

packages/react-notion-x/src/context.tsx

@@ -35,6 +35,7 @@ export interface NotionContext {
   minTableOfContentsItems: number
   linkTableTitleProperties: boolean
   isLinkCollectionToUrlProperty: boolean
+  pageWidth: number
 
   defaultPageIcon?: string | null
   defaultPageCover?: string | null
@@ -63,6 +64,7 @@ export interface PartialNotionContext {
   showCollectionViewDropdown?: boolean
   linkTableTitleProperties?: boolean
   isLinkCollectionToUrlProperty?: boolean
+  pageWidth?: number
 
   showTableOfContents?: boolean
   minTableOfContentsItems?: number
@@ -169,6 +171,7 @@ const defaultNotionContext: NotionContext = {
   showCollectionViewDropdown: true,
   linkTableTitleProperties: true,
   isLinkCollectionToUrlProperty: false,
+  pageWidth: 708,
 
   showTableOfContents: false,
   minTableOfContentsItems: 3,

packages/react-notion-x/src/renderer.tsx

@@ -29,6 +29,7 @@ export function NotionRenderer({
   linkTableTitleProperties,
   isLinkCollectionToUrlProperty,
   isImageZoomable = true,
+  pageWidth,
   showTableOfContents,
   minTableOfContentsItems,
   defaultPageIcon,
@@ -59,6 +60,7 @@ export function NotionRenderer({
   linkTableTitleProperties?: boolean
   isLinkCollectionToUrlProperty?: boolean
   isImageZoomable?: boolean
+  pageWidth?: number
 
   showTableOfContents?: boolean
   minTableOfContentsItems?: number
@@ -111,6 +113,7 @@ export function NotionRenderer({
       showCollectionViewDropdown={showCollectionViewDropdown}
       linkTableTitleProperties={linkTableTitleProperties}
       isLinkCollectionToUrlProperty={isLinkCollectionToUrlProperty}
+      pageWidth={pageWidth}
       showTableOfContents={showTableOfContents}
       minTableOfContentsItems={minTableOfContentsItems}
       defaultPageIcon={defaultPageIcon}

packages/react-notion-x/src/third-party/collection.tsx

@@ -84,7 +84,8 @@ function CollectionViewBlock({
   block: types.CollectionViewBlock | types.CollectionViewPageBlock
   className?: string
 }) {
-  const { recordMap, showCollectionViewDropdown } = useNotionContext()
+  const { recordMap, pageWidth, showCollectionViewDropdown } =
+    useNotionContext()
   const { view_ids: viewIds } = block
   const collectionId = getBlockCollectionId(block, recordMap)!
 
@@ -139,15 +140,15 @@ function CollectionViewBlock({
 
     const width = windowWidth
     // TODO: customize for mobile?
-    const maxNotionBodyWidth = 708
+    const maxNotionBodyWidth = pageWidth
     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
+          ? Math.trunc(width - width * 0.04) // 2vw for each side
           : maxNotionBodyWidth
     }
 
@@ -161,7 +162,7 @@ function CollectionViewBlock({
       width,
       padding
     }
-  }, [windowWidth, parentPage, collectionView?.type, isMounted])
+  }, [windowWidth, parentPage, pageWidth, collectionView?.type, isMounted])
 
   // console.log({
   //   width,

packages/react-notion-x/src/third-party/react-use.ts

@@ -45,16 +45,16 @@ export const useWindowSize = (
   initialHeight = Infinity
 ) => {
   const [state, setState] = useRafState<{ width: number; height: number }>({
-    width: isBrowser ? window.innerWidth : initialWidth,
-    height: isBrowser ? window.innerHeight : initialHeight
+    width: isBrowser ? document.documentElement.clientWidth : initialWidth,
+    height: isBrowser ? document.documentElement.clientHeight : initialHeight
   })
 
   useEffect((): (() => void) | void => {
     if (isBrowser) {
       const handler = () => {
         setState({
-          width: window.innerWidth,
-          height: window.innerHeight
+          width: document.documentElement.clientWidth,
+          height: document.documentElement.clientHeight
         })
       }