feat: add maxColumns prop to VirtualGrid for responsive column capping#8210
Merged
feat: add maxColumns prop to VirtualGrid for responsive column capping#8210
Conversation
Contributor
📝 WalkthroughWalkthroughVirtualGrid.vue refactored to use computed spacer styles instead of inline height calculations, with a new maxColumns prop for column limiting and updated prop typing. AssetGrid.vue integrated responsive breakpoint logic using VueUse to compute column counts based on screen size. Changes
Possibly related PRs
Suggested reviewers
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 01/21/2026, 06:17:35 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Tests: ✅ PassedResults: 507 passed, 0 failed, 0 flaky, 8 skipped (Total: 515) 📊 Browser Reports
|
DrJKL
force-pushed
the
drjkl/virtualgrid-improvements
branch
from
99ac511 to
0103c93
Compare
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 22.4 kB (baseline 22.4 kB) • ⚪ 0 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 1.02 MB (baseline 1.02 MB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 80.7 kB (baseline 80.7 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 9 added / 9 removed Panels & Settings — 430 kB (baseline 430 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 8 added / 8 removed User & Accounts — 3.94 kB (baseline 3.94 kB) • ⚪ 0 BAuthentication, profile, and account management bundles
Status: 3 added / 3 removed Editors & Dialogs — 2.8 kB (baseline 2.8 kB) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
Status: 2 added / 2 removed UI Components — 32.8 kB (baseline 32.8 kB) • ⚪ 0 BReusable component library chunks
Status: 5 added / 5 removed Data & Services — 3.05 MB (baseline 3.04 MB) • 🔴 +857 BStores, services, APIs, and repositories
Status: 7 added / 7 removed Utilities & Hooks — 18.8 kB (baseline 18.8 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 4 added / 4 removed Vendor & Third-Party — 10.4 MB (baseline 10.4 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 6.28 MB (baseline 6.28 MB) • ⚪ 0 BBundles that do not match a named category
Status: 25 added / 25 removed |
dosubot
bot
added
the
size:M
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/components/common/VirtualGrid.vue`:
- Around line 104-112: The helper rowsToHeight is misleading because it takes an
item count and divides by cols; rename it (e.g., itemsCountToHeight or
countToHeight) and its parameter from rows to count to make intent clear, then
update both call sites in topSpacerStyle and bottomSpacerStyle to use the new
name; ensure the function signature (e.g., function countToHeight(count:
number): string) and its internal formula remain the same and adjust any type
annotations if needed.
Comment on lines
+104
to
+112
| function rowsToHeight(rows: number): string { | ||
| return `${(rows / cols.value) * itemHeight.value}px` | ||
| } | ||
| const topSpacerStyle = computed<CSSProperties>(() => ({ | ||
| height: rowsToHeight(state.value.start) | ||
| })) | ||
| const bottomSpacerStyle = computed<CSSProperties>(() => ({ | ||
| height: rowsToHeight(items.length - state.value.end) | ||
| })) |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider renaming rowsToHeight for clarity.
The function accepts an item count (not rows), converts to rows by dividing by cols, then computes pixel height. The name rowsToHeight is misleading.
♻️ Suggested rename
-function rowsToHeight(rows: number): string {
- return `${(rows / cols.value) * itemHeight.value}px`
+function itemCountToHeight(itemCount: number): string {
+ return `${(itemCount / cols.value) * itemHeight.value}px`
}
const topSpacerStyle = computed<CSSProperties>(() => ({
- height: rowsToHeight(state.value.start)
+ height: itemCountToHeight(state.value.start)
}))
const bottomSpacerStyle = computed<CSSProperties>(() => ({
- height: rowsToHeight(items.length - state.value.end)
+ height: itemCountToHeight(items.length - state.value.end)
}))📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| function rowsToHeight(rows: number): string { | |
| return `${(rows / cols.value) * itemHeight.value}px` | |
| } | |
| const topSpacerStyle = computed<CSSProperties>(() => ({ | |
| height: rowsToHeight(state.value.start) | |
| })) | |
| const bottomSpacerStyle = computed<CSSProperties>(() => ({ | |
| height: rowsToHeight(items.length - state.value.end) | |
| })) | |
| function itemCountToHeight(itemCount: number): string { | |
| return `${(itemCount / cols.value) * itemHeight.value}px` | |
| } | |
| const topSpacerStyle = computed<CSSProperties>(() => ({ | |
| height: itemCountToHeight(state.value.start) | |
| })) | |
| const bottomSpacerStyle = computed<CSSProperties>(() => ({ | |
| height: itemCountToHeight(items.length - state.value.end) | |
| })) |
🤖 Prompt for AI Agents
In `@src/components/common/VirtualGrid.vue` around lines 104 - 112, The helper
rowsToHeight is misleading because it takes an item count and divides by cols;
rename it (e.g., itemsCountToHeight or countToHeight) and its parameter from
rows to count to make intent clear, then update both call sites in
topSpacerStyle and bottomSpacerStyle to use the new name; ensure the function
signature (e.g., function countToHeight(count: number): string) and its internal
formula remain the same and adjust any type annotations if needed.
DrJKL
added
needs-backport
github-actions bot
pushed a commit
that referenced
this pull request
Jan 22, 2026
#8210) ## Summary Add `maxColumns` prop to VirtualGrid for responsive column capping. ## Changes - **VirtualGrid**: Add `maxColumns` prop to cap grid columns; refactor inline styles to Tailwind classes; extract spacer height computation to helper function - **AssetGrid**: Use `useBreakpoints` to set responsive `maxColumns` (1-5 based on Tailwind breakpoints) ## Review Focus - `maxColumns` behavior when `Infinity` vs finite: does `gridTemplateColumns` override work correctly? - Tailwind scrollbar classes replacing scoped CSS
Member
github-actions
bot
removed
the
needs-backport
DrJKL
added a commit
that referenced
this pull request
Jan 22, 2026
…sponsive column capping (#8232) Backport of #8210 to `cloud/1.37` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8232-backport-cloud-1-37-feat-add-maxColumns-prop-to-VirtualGrid-for-responsive-column-capp-2f06d73d36508149bdc2fdec700debac) by [Unito](https://www.unito.io) Co-authored-by: Alexander Brown <drjkl@comfy.org>
godwiniheuwa
pushed a commit
to godwiniheuwa/ComfyUI_frontend
that referenced
this pull request
Jan 22, 2026
Comfy-Org#8210) ## Summary Add `maxColumns` prop to VirtualGrid for responsive column capping. ## Changes - **VirtualGrid**: Add `maxColumns` prop to cap grid columns; refactor inline styles to Tailwind classes; extract spacer height computation to helper function - **AssetGrid**: Use `useBreakpoints` to set responsive `maxColumns` (1-5 based on Tailwind breakpoints) ## Review Focus - `maxColumns` behavior when `Infinity` vs finite: does `gridTemplateColumns` override work correctly? - Tailwind scrollbar classes replacing scoped CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add
maxColumnsprop to VirtualGrid for responsive column capping.Changes
maxColumnsprop to cap grid columns; refactor inline styles to Tailwind classes; extract spacer height computation to helper functionuseBreakpointsto set responsivemaxColumns(1-5 based on Tailwind breakpoints)Review Focus
maxColumnsbehavior whenInfinityvs finite: doesgridTemplateColumnsoverride work correctly?