gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-16 23:55:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Align card and column breakpoints (#4449)

Browse Source
This commit is contained in:
Zeno Kapitein
2026-07-29 14:13:25 +02:00
committed by GitHub
parent 5c74eef602
commit 6ac4cf4b76
2 changed files with 3 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/gitbook/src/components/DocumentView/Columns/Columns.tsx
+2 -2
View File
@@ -36,7 +36,7 @@ export function Columns(props: BlockProps<DocumentBlockColumns>) {
return (
<div
className={tcls(
'grid w-full grid-cols-1 gap-x-8 gap-y-4 md:grid-flow-col md:grid-cols-[repeat(var(--grid-slices),minmax(0,1fr))] md:grid-rows-1',
'grid w-full @2xl:grid-flow-col @2xl:grid-cols-[repeat(var(--grid-slices),minmax(0,1fr))] grid-cols-1 @2xl:grid-rows-1 gap-x-8 gap-y-4',
style
)}
style={{ '--grid-slices': COLUMN_DIVISIONS } as React.CSSProperties}
@@ -102,7 +102,7 @@ export function transformLengthToCSS(length: Length) {
}
if (length.unit === '%') {
return {
className: 'md:flex-shrink-0 md:[grid-column:var(--grid-col)]',
className: '@2xl:flex-shrink-0 @2xl:[grid-column:var(--grid-col)]',
style: {
'--grid-col': `auto / span ${Math.round(length.value * 0.01 * COLUMN_DIVISIONS)}`,
} as React.CSSProperties,
packages/gitbook/src/components/DocumentView/Table/ViewCards.tsx
+1 -2
View File
@@ -31,8 +31,7 @@ function CardsGrid(props: TableViewProps<DocumentTableViewCards>) {
'inline-grid',
'gap-4',
'grid-cols-1',
'@sm:grid-cols-2',
view.cardSize === 'large' ? '@xl:grid-cols-2' : '@xl:grid-cols-3',
view.cardSize === 'large' ? '@xl:grid-cols-2' : '@2xl:grid-cols-3 @sm:grid-cols-2', // Large cards break earlier to avoid becoming *too* big.
block.data.fullWidth ? 'large:flex-column' : null
)}
>