Skip to content

Improve CambioImage scroll dismissal behavior #159

@pprunty

Description

@pprunty

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:

  1. Listens for scroll events on document/window level
  2. Dismisses modal on any meaningful scroll movement (e.g., >10px)
  3. Works across all devices and interaction methods
  4. 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

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions