/* Overlay panels on a small screen.
 *
 * Two things the navbar's notification panel got wrong on a phone: a touch
 * scroll inside it also scrolled the page behind it, and the panel itself was
 * wider than the screen.
 */

/* The JS half of the scroll fix (js/overlay-scroll.js) handles this layout's
 * PerfectScrollbar body. This is the other half: where a pane scrolls
 * NATIVELY, the browser chains the gesture to whatever is behind once the
 * pane hits its end, and only overscroll-behavior stops that. */
.dropdown-menu .scrollable-container,
.navbar-dropdown .scrollable-container,
.dropdown-notifications-list,
.modal-body,
.offcanvas-body {
  overscroll-behavior: contain;
}

/* The notification panel asks for min-width: 400px INLINE, which is wider
 * than a 390px phone — the unread count, mark-all-read and dismiss-all
 * controls were all off the right edge of the screen. !important is the only
 * thing that beats an inline style, and it is scoped to phone widths so the
 * 400px panel is untouched everywhere it fits. */
@media (max-width: 575.98px) {
  .dropdown-notifications .dropdown-menu {
    min-width: 0 !important;
    width: calc(100vw - 1.5rem);
    max-width: calc(100vw - 1.5rem);
  }

  /* A phone has less room to give a fixed 400px of list, and the panel needs
   * its footer buttons on screen. */
  .dropdown-notifications .dropdown-notifications-list {
    max-height: min(400px, 52vh) !important;
  }
}