/* Dialogs: what has to be true wherever one can open. Two bugs live here, both of which showed up as "the screen looks wrong when a dialog opens", and neither of which belongs to any one screen. This file is loaded by every layout — staff, member, phone and the signed-out pages — so a dialog behaves the same wherever it appears. This solution uses two dialog libraries. SweetAlert does almost all of it (38 views); Bootstrap's modal is used exactly once, for the student profile popup on People ▸ Öğrenciler and Coach ▸ Öğrencilerim. */ /* ========================================================================= 1. Opening a dialog must not move the page ========================================================================= */ /* Measured on a window with an 11px scrollbar, opening the profile popup: before scrollbar 11px content 208..1269 after scrollbar 0px content 208..1271 body padding-right 11px Bootstrap hides the page's overflow so the background cannot scroll behind the dialog. That takes the scrollbar away, and it then pads the body by the width it just removed to make up for it. Two things happen at once — an 11px strip of scrollbar vanishes, and the compensation does not land exactly, because it is written in CSS pixels and the bar's zoom scales them — so the page visibly jumps as the dialog appears. Reserving the scrollbar's space permanently means there is nothing to take away and nothing to compensate for. The layout is the same width whether a dialog is open or not; the scrollbar just becomes inert instead of vanishing. `!important` because Bootstrap writes the padding as an inline style. SweetAlert is named too: it does not pad, but it does force the scrollbar back with `overflow-y: scroll`, which a reserved gutter makes pointless. */ html { scrollbar-gutter: stable; } body.modal-open, body.swal2-shown { padding-right: 0 !important; } /* ========================================================================= 2. Overlays must not be sized in viewport units ========================================================================= */ /* The top bar's zoom sets `zoom` on . That reflows the page, which is why it was chosen over a transform — but it also scales anything measured in `vw`/`vh`, **including elements that are `position: fixed`**. Measured in Chrome on a 1280x650 window: fixed; width:100vw; height:100vh zoom 0.8 -> 1024x520 zoom 1.2 -> 1536x780 fixed; inset: 0 1280x650 at every zoom Bootstrap sizes its backdrops the first way. At 80% the backdrop covered only the top-left 1024x520 of the screen, so the page was dimmed in a rectangle with a visible edge down the right and across the bottom instead of evenly. Above 100% it ran past the window and forced scrollbars. Sized by their edges instead, which no viewport unit can distort. All of this is identical to the original at 100%. SweetAlert already uses `inset: 0` and was never affected. */ .modal-backdrop, .offcanvas-backdrop { inset: 0; width: auto; height: auto; } /* The staff sidebar had `height: 100vh`, so it stopped short of the bottom below 100% and overran it above. (`.member-sidebar` was already written with top/bottom and was always right.) */ .sidebar { height: auto; bottom: 0; } /* The screen-share overlay goes full-screen the same way, both when expanded and on a phone. */ .screen-share-overlay.fullscreen, .floating-chat-panel.fullscreen { inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; } @media (max-width: 768px) { .screen-share-overlay { inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; } } /* ========================================================================= 3. A dialog built out of a Bootstrap grid must not scroll sideways ========================================================================= */ /* Most of the admin dialogs lay their fields out with `
`. A Bootstrap row is built to sit inside a container that pads it: it carries a negative margin of half the gutter on each side and relies on that padding to absorb it. SweetAlert's body is not that container, so the row comes out a gutter wider than the box holding it -- measured at 706 against 702 -- and the dialog grows a horizontal scrollbar along the bottom for four pixels of nothing. It went unnoticed while the fields were all plain inputs that could shrink. It became visible on the coach form, where the phone field has a fixed column in it. Taking the negative margin off is enough; the columns keep their own padding, so the spacing between fields is unchanged. */ .swal2-html-container > .row { margin-left: 0; margin-right: 0; }