[Glitch] fix: Prevent scrolling behind menus and modals in Safari iOS

Port c1ef1f62d5 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/styles/basics.scss

@@ -1,6 +1,20 @@
 @use 'variables' as *;
 @use 'functions' as *;
 
+html.has-modal {
+  &,
+  body {
+    touch-action: none;
+    overscroll-behavior: none;
+    -webkit-overflow-scrolling: auto;
+    scrollbar-gutter: stable;
+  }
+
+  body {
+    overflow: hidden !important;
+  }
+}
+
 body {
   font-family: $font-sans-serif, sans-serif;
   background: var(--background-color);
@@ -64,21 +78,6 @@ body {
       height: 100%;
       padding-bottom: env(safe-area-inset-bottom);
     }
-
-    &.with-modals--active {
-      overflow-y: hidden;
-      overscroll-behavior: none;
-      margin-right: var(--root-scrollbar-width, 0);
-    }
-  }
-
-  &.with-modals {
-    overflow-x: hidden;
-    overflow-y: scroll;
-
-    &--active {
-      overflow-y: hidden;
-    }
   }
 
   &.player {

app/javascript/flavours/glitch/styles/components.scss

@@ -2961,10 +2961,6 @@ a.account__display-name {
   border-top: 1px solid var(--background-border-color);
   box-sizing: border-box;
 
-  .with-modals--active & {
-    padding-right: var(--root-scrollbar-width);
-  }
-
   .layout-multiple-columns & {
     display: none;
   }
@@ -3235,7 +3231,7 @@ a.account__display-name {
     .navigation-panel {
       margin: 0;
       border-inline-start: 1px solid var(--background-border-color);
-      height: 100vh;
+      height: 100dvh;
     }
 
     .navigation-panel__banner,
@@ -3293,6 +3289,7 @@ a.account__display-name {
     .navigation-panel {
       width: 284px;
       overflow-y: auto;
+      scrollbar-width: thin;
 
       &__menu {
         flex-shrink: 0;