/*
 * M-3 — Notifications drawer header was clipped to "Benachrichtigunge"
 * and the drawer did not respect the viewport width; the 5th
 * notification was hidden below the fold with no scroll affordance.
 *
 * Scoped to notification-drawer selectors only. No global side effects:
 * pages that do not render a notifications drawer match no rules here.
 *
 * Covers three common drawer markup variants observed in MGW UI:
 *   - .NotificationDrawer / .NotificationsDrawer (project classes)
 *   - .offcanvas[data-notification-drawer]       (Bootstrap offcanvas)
 *   - [data-notification-drawer]                 (generic data hook)
 */

.NotificationDrawer,
.NotificationsDrawer,
.offcanvas[data-notification-drawer],
[data-notification-drawer] {
    box-sizing: border-box;
    max-width: 100vw;
    width: min(420px, 100vw);
}

.NotificationDrawer-header,
.NotificationsDrawer-header,
.offcanvas[data-notification-drawer] .offcanvas-header,
[data-notification-drawer] [data-drawer-header] {
    min-width: 0;
    overflow: visible;
}

.NotificationDrawer-header h2,
.NotificationDrawer-header h3,
.NotificationsDrawer-header h2,
.NotificationsDrawer-header h3,
.offcanvas[data-notification-drawer] .offcanvas-title,
[data-notification-drawer] [data-drawer-title] {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.NotificationDrawer-body,
.NotificationsDrawer-body,
.offcanvas[data-notification-drawer] .offcanvas-body,
[data-notification-drawer] [data-drawer-body] {
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}