📱 Responsive Behavior

1. The Problem with Floating Mode on Small Screens

Floating mode anchors the calendar popover to its input. For multi-month layouts (visible-months-count="3", 2×3 grid, etc.), the calendar can be wider than the viewport itself — users get a horizontal scrollbar, the picker overflows the screen edge, and on mobile it becomes unusable.

Modal mode renders the calendar as a centered overlay with a backdrop scrim instead. It works at any viewport width, scales the configured layout responsively, and locks body scroll while open.

2. Opting In: positioning-mode="modal"

positioning_mode="modal" · open via el.isOpen = true

Set the attribute and the picker opens as a centered overlay. Closes via Escape, backdrop click, Apply (range mode), or after a complete selection.

<web-daterangepicker
  selection-mode="range"
  positioning-mode="modal"></web-daterangepicker>

// Open programmatically
document.querySelector('#picker').isOpen = true;

3. Modal Width Tiers

The modal's outer width adapts to viewport size, picking from four CSS variables. Breakpoints align with the rest of the codebase (480 / 768 / 1200, same as base.css and the Responsive Sizing demo's --drp-rem scaling).

Override per-instance via the host element. The breakpoints themselves are hardcoded in modal.css because CSS media queries cannot read CSS variables — only the widths inside each rule are variable-driven.

/* Custom widths per tier */
web-daterangepicker {
  --drp-modal-width-md: 75vw;
  --drp-modal-width-lg: 1300px;
}

/* Other modal hooks */
:root {
  --drp-modal-gap: 16px;                    /* viewport-edge gap */
  --drp-modal-backdrop-bg: rgba(0, 0, 0, 0.45); /* scrim color */
  --drp-modal-transition: 150ms ease-out;   /* fade timing */
  --drp-z-index-modal: 9800;
  --drp-z-index-modal-backdrop: 9700;
}

4. Progressive Inner-Content Layout

Beyond just sizing the outer modal, the inner multi-month layout scales based on the modal's actual width via CSS container queries. The visible month count and grid columns adapt without any JS.

Hidden columns (when present) still update in lockstep through the existing collision-resolve navigation logic — range selection across "more months than are visible" continues to work; the user just navigates time linearly with the visible month's prev/next.

5. Auto-Engage on Small Viewports

mobile_modal_breakpoint="768px" · mobile_modal_min_height="500px"

For pickers that should be floating on desktop but modal on phones/tablets, set one or both of these attributes on a positioning-mode="floating" picker:

If both are set, they OR — modal engages when either matches, switches back to floating only when both are clear. Either attribute alone works on its own.

<web-daterangepicker
  selection-mode="range"
  positioning-mode="floating"
  mobile-modal-breakpoint="768px"
  mobile-modal-min-height="500px"
  visible-months-count="2"></web-daterangepicker>

6. Modal Behavior Details

• Closes on: Escape, backdrop click, Apply button (range mode), or completing a selection (when auto-close="selection", the default).
• Body scroll is locked while the modal is open. Reference-counted so multiple modal pickers don't fight over document.body.style.overflow.
• Input is blur()-ed when the modal opens. This suppresses the mobile soft keyboard, which would otherwise overlap the modal. Focus is restored to the input on close.
• Sticky regions inside the modal: per-month headers stay pinned to the top of the scrolling months area, the action bar (Today/Clear/Apply) stays pinned to the bottom. Days scroll between them; the action bar is always reachable.
• shouldCloseOnScroll is a no-op in modal mode — you're meant to scroll inside the modal, not have it close on you.