generated from shadcn-ui/registry-template-v3
-
Notifications
You must be signed in to change notification settings - Fork 0
Open
Description
Problem
Currently, the CambioImage component's dismissible functionality has limitations:
- dismissible=true only works for swipe gestures on mobile devices
- Scroll dismissal only works when scrolling directly over the image, not on the overlay/backdrop
- Desktop users have limited ways to dismiss the modal besides clicking outside
Expected Behavior
The image modal should dismiss when:
- User scrolls anywhere on the page (including overlay/backdrop areas)
- Works consistently on both desktop and mobile
- Provides intuitive dismissal interaction
Current Implementation
- Located in apps/www/registry/delta-ui/delta/cambio-image.tsx
- Has basic scroll detection but limited to specific scroll targets
- Uses Cambio library's built-in dismissible prop
Proposed Solution
Implement comprehensive scroll detection that:
- Listens for scroll events on document/window level
- Dismisses modal on any meaningful scroll movement (e.g., >10px)
- Works across all devices and interaction methods
- Maintains good UX without being overly sensitive
Additional Context
- This affects user experience when viewing images in documentation
- Current workaround requires users to click outside or use specific gestures
- Should maintain existing functionality while adding broader dismissal options
Files to Modify
- apps/www/registry/delta-ui/delta/cambio-image.tsx
Acceptance Criteria
- Modal dismisses on page scroll from any location
- Works on both desktop and mobile
- Maintains existing click-to-dismiss functionality
- No conflicts with Cambio's built-in dismissible behavior
- Scroll threshold prevents accidental dismissals
Metadata
Metadata
Assignees
Labels
No labels