Skip to content

fix: resolve bookmark 2x4 layout overflow and cleanup grid logic #443

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

Merged
sajjadmrx merged 1 commit into from
Sep 5, 2026
Merged

fix: resolve bookmark 2x4 layout overflow and cleanup grid logic #443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
53 changes: 8 additions & 45 deletions src/layouts/bookmark/__tests__/bookmark.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,36 +60,8 @@ function computeBookmarkGridDimensions(size?: WidgetSize): {
rowsCount: number
totalBookmarks: number
} {
let colsCount = 5
let rowsCount = 2

if (size) {
if (size.w === 1 && size.h === 1) {
colsCount = 1
rowsCount = 1
} else if (size.w === 1) {
colsCount = 1
rowsCount = size.h
} else if (size.w === 2 && size.h === 1) {
colsCount = 2
rowsCount = 1
} else if (size.w === 2 && size.h === 2) {
colsCount = 2
rowsCount = 2
} else if (size.w === 2 && size.h >= 3) {
colsCount = 2
rowsCount = 5
} else if (size.w === 2) {
colsCount = 2
rowsCount = size.h
} else if (size.w === 4 && size.h === 1) {
colsCount = 5
rowsCount = 1
} else if (size.w === 4) {
colsCount = 5
rowsCount = size.h
}
}
const colsCount = size ? (size.w === 4 ? 5 : size.w) : 5
const rowsCount = size ? size.h : 2

return {
colsCount,
Expand Down Expand Up @@ -293,11 +265,11 @@ describe('Bookmark Legacy Compatibility & Layout Tests', () => {
expect(dim.totalBookmarks).toBe(4)
})

it('computes vertical size (2x4) as 10 bookmark slots in 5 rows of 2', () => {
it('computes vertical size (2x4) as 8 bookmark slots in 4 rows of 2', () => {
const dim = computeBookmarkGridDimensions({ w: 2, h: 4 })
expect(dim.colsCount).toBe(2)
expect(dim.rowsCount).toBe(5)
expect(dim.totalBookmarks).toBe(10)
expect(dim.rowsCount).toBe(4)
expect(dim.totalBookmarks).toBe(8)
})

it('pads bookmarks array with null empty slots up to total count', () => {
Expand Down Expand Up @@ -378,10 +350,7 @@ describe('Bookmark Legacy Compatibility & Layout Tests', () => {
},
]

const filterForWidget = (
widgetId?: string | null,
isPrimary?: boolean
) => {
const filterForWidget = (widgetId?: string | null, isPrimary?: boolean) => {
return mixedBookmarks.filter((b) => {
if (b.parentId !== null) return false
const shouldIncludeLegacy =
Expand All @@ -403,10 +372,7 @@ describe('Bookmark Legacy Compatibility & Layout Tests', () => {
// Primary / Default widget receives legacy bookmarks + its own
const primaryItems = filterForWidget('bookmarks-default', true)
expect(primaryItems).toHaveLength(2)
expect(primaryItems.map((b) => b.id)).toEqual([
'legacy-bm',
'default-widget-bm',
])
expect(primaryItems.map((b) => b.id)).toEqual(['legacy-bm', 'default-widget-bm'])

// Primary widget with a dynamic MongoDB ObjectId (e.g. 6a8624e1...) ALSO receives legacy bookmarks + default
const mongoPrimaryItems = filterForWidget('6a8624e18ad0a538d22483dd', true)
Expand All @@ -419,10 +385,7 @@ describe('Bookmark Legacy Compatibility & Layout Tests', () => {
// Generic / Simplify / Advanced view without instanceId also receives legacy bookmarks
const genericItems = filterForWidget(null, true)
expect(genericItems).toHaveLength(2)
expect(genericItems.map((b) => b.id)).toEqual([
'legacy-bm',
'default-widget-bm',
])
expect(genericItems.map((b) => b.id)).toEqual(['legacy-bm', 'default-widget-bm'])

// Duplicated / New separate instance receives ONLY its own bookmarks and starts clean
const duplicatedItems = filterForWidget('bookmarks-duplicated-123', false)
Expand Down
32 changes: 8 additions & 24 deletions src/layouts/bookmark/bookmark-grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,34 +195,18 @@ export function BookmarkGrid({

const isAutoRows = isModal || !rowsCount

const gridColsClass =
colsCount === 1 ? 'grid-cols-1' : colsCount === 2 ? 'grid-cols-2' : 'grid-cols-5'

const gridRowsClass =
rowsCount === 1
? 'grid-rows-1'
: rowsCount === 2
? 'grid-rows-2'
: rowsCount === 3
? 'grid-rows-3'
: ''

return (
<div
style={
isAutoRows
? {
gridTemplateColumns: `repeat(${colsCount}, minmax(0, 1fr))`,
}
: {
gridTemplateColumns: `repeat(${colsCount}, minmax(0, 1fr))`,
gridTemplateRows: `repeat(${rowsCount}, minmax(0, 1fr))`,
}
}
style={{
gridTemplateColumns: `repeat(${colsCount}, minmax(0, 1fr))`,
...(!isAutoRows && {
gridTemplateRows: `repeat(${rowsCount}, minmax(0, 1fr))`,
}),
}}
className={
isAutoRows
? `grid w-full auto-rows-[5.5rem] sm:auto-rows-[5.75rem] ${gridColsClass} gap-2 p-0.5 transition-all duration-300 rounded-2xl`
: `grid w-full h-full grid-flow-row ${gridColsClass} ${gridRowsClass} gap-1.5 transition-all duration-300 rounded-2xl`
? 'grid w-full auto-rows-[5.5rem] sm:auto-rows-[5.75rem] gap-2 p-0.5 transition-all duration-300 rounded-2xl'
: 'grid w-full h-full grid-flow-row gap-1.5 transition-all duration-300 rounded-2xl'
}
>
<SortableContext
Expand Down
32 changes: 2 additions & 30 deletions src/layouts/bookmark/bookmarks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,36 +52,8 @@ export function BookmarksList({ size, instanceId }: BookmarksListProps = {}) {
})
)

let colsCount = 5
let rowsCount = 2

if (size) {
if (size.w === 1 && size.h === 1) {
colsCount = 1
rowsCount = 1
} else if (size.w === 1) {
colsCount = 1
rowsCount = size.h
} else if (size.w === 2 && size.h === 1) {
colsCount = 2
rowsCount = 1
} else if (size.w === 2 && size.h === 2) {
colsCount = 2
rowsCount = 2
} else if (size.w === 2 && size.h >= 3) {
colsCount = 2
rowsCount = 5
} else if (size.w === 2) {
colsCount = 2
rowsCount = size.h
} else if (size.w === 4 && size.h === 1) {
colsCount = 5
rowsCount = 1
} else if (size.w === 4) {
colsCount = 5
rowsCount = size.h
}
}
const colsCount = size ? (size.w === 4 ? 5 : size.w) : 5
const rowsCount = size ? size.h : 2

const TOTAL_BOOKMARKS = colsCount * rowsCount

Expand Down
Loading