/* Actvid report modal containment/viewport fix v3. The report widget is rendered inside the related-content markup, so keep the actual Bootstrap modal attached to and make the form scroll internally on shorter screens. */ .m2w-report-modal { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; padding: 16px 0 !important; overflow-x: hidden !important; overflow-y: auto !important; z-index: 1100 !important; } .m2w-report-modal .modal-dialog, .m2w-report-modal .modal-dialog.modal-dialog-centered { display: flex !important; width: calc(100% - 28px) !important; max-width: 560px !important; min-height: calc(100vh - 32px) !important; margin: 0 auto !important; align-items: center !important; transform: none !important; pointer-events: none; } .m2w-report-modal .modal-dialog-centered::before { display: none !important; } .m2w-report-modal .modal-content { display: flex !important; width: 100% !important; max-height: calc(100vh - 32px) !important; flex-direction: column !important; overflow: hidden !important; pointer-events: auto; } .m2w-report-modal .m2w-report-form { display: flex !important; width: 100%; min-height: 0; max-height: calc(100vh - 32px); flex-direction: column; } .m2w-report-modal .m2w-report-header, .m2w-report-modal .m2w-report-subject, .m2w-report-modal .m2w-report-footer { flex: 0 0 auto; } .m2w-report-modal .m2w-report-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Keep the whole dialog usable on laptop-height screens instead of clipping the lower issue fields / textarea / submit button. */ @media screen and (max-height: 720px) and (min-width: 576px) { .m2w-report-modal { padding: 10px 0 !important; } .m2w-report-modal .modal-dialog, .m2w-report-modal .modal-dialog.modal-dialog-centered { min-height: calc(100vh - 20px) !important; } .m2w-report-modal .modal-content, .m2w-report-modal .m2w-report-form { max-height: calc(100vh - 20px) !important; } .m2w-report-header { padding-top: 13px !important; padding-bottom: 13px !important; } .m2w-report-subject { min-height: 66px !important; padding-top: 9px !important; padding-bottom: 9px !important; } .m2w-report-subject img { width: 36px !important; height: 50px !important; flex-basis: 36px !important; } .m2w-report-body { padding-top: 14px !important; } .m2w-report-player { margin-bottom: 14px !important; } .m2w-report-grid { gap: 12px 18px !important; margin-bottom: 14px !important; } .m2w-report-other textarea { min-height: 72px !important; } .m2w-report-footer { padding-top: 10px !important; padding-bottom: 12px !important; } } @media screen and (max-width: 575px) { .m2w-report-modal { padding: 8px 0 !important; } .m2w-report-modal .modal-dialog, .m2w-report-modal .modal-dialog.modal-dialog-centered { width: calc(100% - 16px) !important; min-height: calc(100vh - 16px) !important; align-items: flex-start !important; } .m2w-report-modal .modal-content, .m2w-report-modal .m2w-report-form { max-height: calc(100vh - 16px) !important; } }