diff --git a/packages/react-notion-x/src/styles.css b/packages/react-notion-x/src/styles.css
index b6115aed..4eebf0b3 100644
--- a/packages/react-notion-x/src/styles.css
+++ b/packages/react-notion-x/src/styles.css
@@ -1512,6 +1512,10 @@ svg.notion-page-icon {
 .notion-collection {
   align-self: center;
   min-width: 100%;
+  max-width: 100%;
+  overflow: auto;
+  padding: 4px;
+  margin: -4px;
 }
 
 .notion-collection-header {
@@ -1576,8 +1580,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 +1990,8 @@ svg.notion-page-icon {
 }
 
 .notion-board {
-  width: 100vw;
-  max-width: 100vw;
+  width: 100%;
+  max-width: 100%;
   align-self: center;
   overflow: auto hidden;
 }
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'
           )}
         >
           <CollectionViewColumnDesc