From 6109fab14e4dac3a85ffa51ddfcd7e3aaef5149a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 8 Apr 2022 10:17:23 +0300
Subject: [PATCH] cleanup, fix some things, try to disable scrollbars on mobile

---
 src/App.scss                               | 26 +++++++++++++---------
 src/App.vue                                |  2 +-
 src/components/chat/chat.scss              |  9 --------
 src/components/media_modal/media_modal.vue |  2 +-
 src/components/modal/modal.vue             |  2 +-
 5 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index dd3d8cbb..0deac2b1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -116,7 +116,7 @@ nav {
 
 #content {
   overscroll-behavior-y: none;
-  overflow-y: auto;
+  overflow-y: scroll;
   overflow-x: hidden;
   position: sticky;
 }
@@ -198,19 +198,23 @@ nav {
       margin-left: -2em;
       padding-left: 2.5em;
 
-      &:not(.-show-scrollbar) {
-        scrollbar-width: none;
-        margin-right: -2em;
-        padding-right: 2.5em;
+      // Only show custom scrollbars on devices which
+      // have a cursor/pointer to operate them
+      @media (pointer: fine) {
+        &:not(.-show-scrollbar) {
+          scrollbar-width: none;
+          margin-right: -2em;
+          padding-right: 2.5em;
 
-        &::-webkit-scrollbar {
-          display: block;
-          width: 0;
+          &::-webkit-scrollbar {
+            display: block;
+            width: 0;
+          }
         }
-      }
 
-      .panel-heading.-sticky {
-        top: -10px;
+        .panel-heading.-sticky {
+          top: -10px;
+        }
       }
     }
   }
diff --git a/src/App.vue b/src/App.vue
index 243a3314..b5f6e7d3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,8 +41,8 @@
         <router-view />
       </div>
       <div id="notifs-column" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"/>
-      <media-modal />
     </div>
+    <media-modal />
     <shout-panel
       v-if="currentUser && shout && !hideShoutbox"
       :floating="true"
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 51bb3ea6..85e9f59d 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -133,18 +133,9 @@
     .chat-view-heading {
       box-sizing: border-box;
       position: static;
-      z-index: 9999;
       top: 0;
       margin-top: 0;
       border-radius: 0;
-
-      /* This practically overlays the panel heading color over panel background
-       * color. This is needed because we allow transparent panel background and
-       * it doesn't work well in this "disjointed panel header" case
-       */
-      background:
-        linear-gradient(to top, var(--panel), var(--panel)),
-        linear-gradient(to top, var(--bg), var(--bg));
       height: 50px;
     }
 
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 708a43c6..c7dcd007 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -121,7 +121,7 @@ $modal-view-button-icon-width: 3em;
 $modal-view-button-icon-margin: 0.5em;
 
 .modal-view.media-modal-view {
-  z-index: 1001;
+  z-index: 9000;
   flex-direction: column;
 
   .modal-view-button-arrow,
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 2b58913f..9394efff 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -35,7 +35,7 @@ export default {
 
 <style lang="scss">
 .modal-view {
-  z-index: 1000;
+  z-index: 2000;
   position: fixed;
   top: 0;
   left: 0;