Skip to content

fix: remove manual width/padding calculations from collection views #689

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.

Sign up for GitHub

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

Open
albertodainotti wants to merge 4 commits into
base: master
Choose a base branch
from
Open

fix: remove manual width/padding calculations from collection views #689

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
59f317a
remove manual calculations of width, padding relative to window size …
albertodainotti Jan 9, 2026
33c5bc0
fix: use 100% instead of 100vw for table and board collection widths
albertodainotti Mar 8, 2026
f1600bf
fix: constrain .notion-collection width to prevent table overflow
albertodainotti Mar 8, 2026
3cc922a
fix: add padding to .notion-collection to prevent card shadow clipping
albertodainotti Mar 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions packages/react-notion-x/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down
84 changes: 43 additions & 41 deletions packages/react-notion-x/src/third-party/collection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,17 @@ 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,
className,
ctx
}: {
block:
| types.CollectionViewBlock
| types.CollectionViewPageBlock
| types.PageBlock
| types.CollectionViewBlock
| types.CollectionViewPageBlock
| types.PageBlock
className?: string
ctx: NotionContext
}) {
Expand Down Expand Up @@ -116,55 +114,59 @@ 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(
recordMap.collection_view[collectionViewId]
)
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,
Expand Down Expand Up @@ -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
Expand Down