fix(nc-gui): grid row visibility issue in mobile view #10257
Conversation
📝 WalkthroughWalkthroughThe pull request introduces modifications to the grid component's rendering logic, specifically focusing on the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Uffizzi Preview |
o1lab
force-pushed
the
nc-fix/grid-mobile-view-issue
branch
from
7dac23f to
1e8dc28
Compare
o1lab
force-pushed
the
nc-fix/grid-mobile-view-issue
branch
from
1e8dc28 to
8da5fbc
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
packages/nc-gui/components/smartsheet/grid/GroupByTable.vue (1)
Line range hint
18-18: Update prop type to match the new enum usageThe prop is defined as
rowHeight?: numberbut is being used as an enum in the template (:row-height-enum). This type mismatch could cause runtime issues.Please update the prop type to match the enum type being used. Consider:
- rowHeight?: number + rowHeightEnum?: RowHeightEnum // Replace with actual enum type
🧹 Nitpick comments (2)
packages/nc-gui/components/smartsheet/grid/index.vue (2)
Line range hint
48-65: Add documentation and type safety to row height computation.The row height computation logic would benefit from:
- Documentation explaining what each numeric value (0-3) represents
- TypeScript enum or const object for the height values
- Explicit typing for the return value
+// Enum for row height values +enum RowHeightMultiplier { + COMPACT = 1, // Case 0: Compact view + REGULAR = 2, // Case 1: Regular view + RELAXED = 4, // Case 2: Relaxed view + SPACIOUS = 6, // Case 3: Spacious view +} -const rowHeight = computed(() => { +const rowHeight = computed((): number => { if ((view.value?.view as GridType)?.row_height !== undefined) { switch ((view.value?.view as GridType)?.row_height) { case 0: - return 1 + return RowHeightMultiplier.COMPACT case 1: - return 2 + return RowHeightMultiplier.REGULAR case 2: - return 4 + return RowHeightMultiplier.RELAXED case 3: - return 6 + return RowHeightMultiplier.SPACIOUS default: - return 1 + return RowHeightMultiplier.COMPACT // Default to compact view } } + return RowHeightMultiplier.COMPACT // Handle undefined case })
Line range hint
183-191: Enhance mobile view handling with explicit breakpoint detection.The current mobile view handling could be improved by:
- Adding explicit mobile breakpoint detection using Vue's
useBreakpointscomposable- Handling edge cases when sidebar width is undefined
+const breakpoints = useBreakpoints({ + mobile: '640px', + tablet: '768px', + desktop: '1024px', +}) + +const isMobileView = computed(() => breakpoints.smaller('tablet')) + const updateViewWidth = () => { if (isPublic.value) { viewWidth.value = windowSize.value return } - viewWidth.value = windowSize.value - leftSidebarWidth.value + // Handle undefined sidebar width in mobile view + const sidebarWidth = isMobileView.value ? 0 : (leftSidebarWidth.value ?? 0) + viewWidth.value = windowSize.value - sidebarWidth }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
packages/nc-gui/components/smartsheet/grid/GroupByTable.vue(1 hunks)packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue(7 hunks)packages/nc-gui/components/smartsheet/grid/Table.vue(12 hunks)packages/nc-gui/components/smartsheet/grid/index.vue(1 hunks)packages/nc-gui/nuxt.config.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- packages/nc-gui/nuxt.config.ts
- packages/nc-gui/components/smartsheet/grid/InfiniteTable.vue
- packages/nc-gui/components/smartsheet/grid/Table.vue
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: release-docker / buildx
- GitHub Check: pre-build-for-playwright / playwright
- GitHub Check: unit-tests-pg
- GitHub Check: unit-tests
🔇 Additional comments (2)
packages/nc-gui/components/smartsheet/grid/GroupByTable.vue (1)
291-291: Verify if the row height enum change fixes the mobile view issueWhile the PR aims to fix grid row visibility in mobile view, the implementation only changes the row height prop type without any explicit mobile-specific logic. Please verify:
- How does this change fix the mobile view issue?
- Have you tested this on different mobile devices and screen sizes?
Could you provide test results or screenshots demonstrating the fix on mobile devices?
packages/nc-gui/components/smartsheet/grid/index.vue (1)
315-315: 🛠️ Refactor suggestionEnsure consistent prop naming across components.
The prop name has been updated to
row-height-enumin Table and InfiniteTable components, but GroupBy still usesrow-height. This inconsistency should be addressed.Let's verify the impact of this change:
Also applies to: 315-315, 347-348
Change Summary
Provide summary of changes with issue number if any.
Change type
Test/ Verification
Provide summary of changes.
Additional information / screenshots (optional)
Anything for maintainers to be made aware of