/* * Keep Angular UI Bootstrap datepicker popups stable inside Opal modals * on smaller screens. Appending the popup to avoids clipping/flicker * from modal overflow containers; these rules keep it above the modal and * within the viewport on narrow screens. */ .uib-datepicker-popup.dropdown-menu, .dropdown-menu[uib-datepicker-popup-wrap] { z-index: 2000; } .uib-datepicker-popup.dropdown-menu table, .dropdown-menu[uib-datepicker-popup-wrap] table { outline: none; } @media (max-width: 767px) { .uib-datepicker-popup.dropdown-menu, .dropdown-menu[uib-datepicker-popup-wrap] { max-width: calc(100vw - 24px); overflow-x: auto; } } /* * During the first paint after opening from a click/touch, keep the newly * materialized popup from receiving the same pointer interaction that opened it. * This prevents first-click flicker when the cursor is already over the space * where the calendar appears on smaller screens. */ .lecminder-datepicker-opening .uib-datepicker-popup.dropdown-menu, .lecminder-datepicker-opening .dropdown-menu[uib-datepicker-popup-wrap] { pointer-events: none; }