MENDELU: reserve the scrollbar gutter so the page stops shifting on reload (#1406)

On reload the home page content jumps ~7.5px to the right and back. While Angular
boots it replaces the server-rendered DOM, so for a moment the page is too short
to scroll: the vertical scrollbar disappears and then returns, the viewport widens
1425 -> 1440 -> 1425, and every centred container slides half a scrollbar width
sideways. The anti-flicker overlay cannot hide this one -- the overlay lives inside
the page, so it shifts along with everything else.

Reserve the scrollbar's width permanently (scrollbar-gutter: stable, with an
overflow-y: scroll fallback for older engines) so its appearance/disappearance is a
no-op for layout. ng-bootstrap pads the body by the scrollbar width when a modal
opens; with the gutter always reserved that compensation becomes surplus and would
itself shift the page ~7.5px, so it is cancelled for body.modal-open.

Measured on the dev instance (dev-6.pc:8573), logged out, headed browser, short
viewport, overlay active:
  reload content shift   7.5px  -> 0px
  modal open shift      -7.5px  -> 0px   (after the modal-open cancel)

This is the same fix already applied to the UoE/datashare frontend.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: milanmajchrak

src/styles/_global-styles.scss

@@ -1,12 +1,35 @@
 html {
     position: relative;
     min-height: 100%;
+
+    // Always reserve the vertical scrollbar's width. While Angular boots it replaces the
+    // server-rendered DOM, so the page is briefly too short to scroll: the scrollbar disappears and
+    // then comes back, widening and re-narrowing the viewport and sliding every centred container
+    // sideways by half the scrollbar width (~7.5px right, then back). The anti-flicker overlay cannot
+    // hide that, because the overlay lives in the page and shifts with it.
+    scrollbar-gutter: stable;
+}
+
+// scrollbar-gutter is unsupported before Chrome 94 / Firefox 97 / Safari 16; keeping the scrollbar
+// track permanently visible reserves the same width there.
+@supports not (scrollbar-gutter: stable) {
+    html {
+        overflow-y: scroll;
+    }
 }
 
 body {
     overflow-x: hidden;
 }
 
+// ng-bootstrap pads the body by the scrollbar width when a modal opens, to compensate for the
+// scrollbar it is about to hide. With the gutter reserved above, that width is never actually freed,
+// so the compensation is pure surplus and shifts the page left by half of it -- the very thing the
+// reserved gutter exists to prevent. Cancel it; the gutter already keeps the width steady.
+body.modal-open {
+    padding-right: 0 !important;
+}
+
 // Sticky Footer
 .outer-wrapper {
     display: flex;