Conversation
- Expose `isCollapsed` from `useMantineWindow` - Pass `isCollapsed` to `useWindowDrag` - Use header height (40px) for drag bounds when window is collapsed - Improves dragging behavior for collapsed windows
- Add `windowRef` to `useMantineWindow` and `useWindowDrag` options - Update drag bounds calculation to use measured height from the DOM - Improves window dragging accuracy when collapsed
- Introduce boolean prop to make side resize handles span full window edges. - Update docs, demos, and stories to showcase new behavior. - Adjust CSS to apply full-size handles when enabled.
- Ensure resize handles are only rendered when the window is not collapsed - Horizontal resize handles remain available even when the window is collapsed - Clarify comments to reflect new conditional logic for better maintainability
There was a problem hiding this comment.
Pull request overview
This PR improves window dragging/resizing behavior when the window is collapsed and adds a new option to make resize handles span the full edge for easier interaction.
Changes:
- Update drag-bounds calculations to use the window’s actual rendered height when collapsed.
- Add
fullSizeResizeHandlesprop and apply it to side resize handles (with supporting CSS). - Add Storybook/docs demos and configurator support for the new resize-handle behavior.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| package/src/hooks/use-window-drag.ts | Uses DOM-measured height when collapsed to compute drag constraints. |
| package/src/hooks/use-mantine-window.ts | Passes collapsed state and windowRef into drag hook. |
| package/src/Window.tsx | Adds fullSizeResizeHandles prop and adjusts handle rendering for collapsed state. |
| package/src/Window.module.css | Implements full-edge side handle styling via data-full-size. |
| package/src/Window.story.tsx | Adds Storybook stories showcasing full-size handles. |
| docs/docs.mdx | Documents the new fullSizeResizeHandles behavior. |
| docs/demos/index.ts | Exports the new demo entry. |
| docs/demos/Window.demo.fullSizeHandles.tsx | Adds a docs demo for full-size resize handles. |
| docs/demos/Window.demo.configurator.tsx | Adds fullSizeResizeHandles to the configurator controls. |
| if (isCollapsed && windowRef.current) { | ||
| // Get the actual rendered height of the window element | ||
| const rect = windowRef.current.getBoundingClientRect(); | ||
| effectiveHeight = rect.height; | ||
| } |
There was a problem hiding this comment.
getBoundingClientRect() is called inside applyBounds, which runs on every drag move while collapsed. This can trigger layout/reflow repeatedly and hurt drag performance. Consider measuring the collapsed height once (e.g., on drag start or in a layout effect when isCollapsed changes) and caching it in a ref/state for use during the drag instead of reading layout on each move.
| const applyBounds = useCallback( | ||
| (newX: number, newY: number): { x: number; y: number } => { | ||
| // When collapsed, use the actual measured height from the DOM | ||
| // This ensures we account for all borders, paddings, and margins |
There was a problem hiding this comment.
getBoundingClientRect() includes padding and borders, but not margins. The comment is misleading and should be adjusted to reflect what is actually measured.
| // This ensures we account for all borders, paddings, and margins | |
| // This uses the element's rendered box height (including padding and borders, excluding margins) |
| data-full-size={fullSizeResizeHandles || undefined} | ||
| {...resizeHandlers.right} | ||
| {...getStyles('resizeHandleRight')} | ||
| /> | ||
| <Box | ||
| data-resize-handle | ||
| data-full-size={fullSizeResizeHandles || undefined} |
There was a problem hiding this comment.
With fullSizeResizeHandles enabled, the left/right handle CSS insets by --window-handle-square (to avoid corner handles). When the window is collapsed (and corner handles are not rendered), this inset can significantly reduce the effective hit area (often smaller than the default 40px handle). Consider only applying the corner-avoidance inset when corner handles are actually present (e.g., resizable === 'both' && !isCollapsed), while keeping true full-height handles in collapsed or non-corner modes.
| data-full-size={fullSizeResizeHandles || undefined} | |
| {...resizeHandlers.right} | |
| {...getStyles('resizeHandleRight')} | |
| /> | |
| <Box | |
| data-resize-handle | |
| data-full-size={fullSizeResizeHandles || undefined} | |
| data-full-size={ | |
| fullSizeResizeHandles && resizable === 'both' && !isCollapsed ? true : undefined | |
| } | |
| {...resizeHandlers.right} | |
| {...getStyles('resizeHandleRight')} | |
| /> | |
| <Box | |
| data-resize-handle | |
| data-full-size={ | |
| fullSizeResizeHandles && resizable === 'both' && !isCollapsed ? true : undefined | |
| } |
| {/* Horizontal handles - always available for horizontal resize even when collapsed */} | ||
| {resizable !== 'none' && (resizable === 'horizontal' || resizable === 'both') && ( | ||
| <> | ||
| <Box | ||
| data-resize-handle | ||
| data-full-size={fullSizeResizeHandles || undefined} | ||
| {...resizeHandlers.right} | ||
| {...getStyles('resizeHandleRight')} | ||
| /> | ||
| <Box | ||
| data-resize-handle | ||
| data-full-size={fullSizeResizeHandles || undefined} | ||
| {...resizeHandlers.left} | ||
| {...getStyles('resizeHandleLeft')} | ||
| /> | ||
| </> | ||
| )} |
There was a problem hiding this comment.
New behaviors are introduced (collapsed drag bounds using measured height, and fullSizeResizeHandles affecting handle layout), but there are no corresponding unit tests. Please add tests to cover at least: (1) horizontal handles remain available when collapsed, (2) data-full-size is applied when fullSizeResizeHandles is true, and (3) drag bounds calculations differ when collapsed vs expanded.
1 participant
🌟 [feat] Implemented a suite of improvements to the Window component, adding a fullSizeResizeHandles prop that enabled full-size handles when collapsed, and updated the drag logic to use the actual window height in collapsed mode for accurate bounds.
Added collapsed state handling to the drag hooks, tightening bounds calculations and preventing out-of-bounds movement. Fixed rendering glitches of resize handles when the window was collapsed, ensuring consistent visual behavior. Refactored the resize handle rendering logic to be more robust and easier to maintain. These changes enhanced user experience by providing smoother resizing and more reliable drag behavior in collapsed windows.