Fix #5064 @1

diff --git a/resources/styles/components/contact-shortcut.styl b/resources/styles/components/contact-shortcut.styl
index af0dc8a7785c721b0609e70de9a0c4fe9dd838f8..697dacf6bee0d8be66f6301321f801607bd99256 100644 (file)
--- a/resources/styles/components/contact-shortcut.styl
+++ b/resources/styles/components/contact-shortcut.styl
@@ -8,9 +8,12 @@ $contact-tab-width = 2.5em // Width of visible tab when closed (see font-size of
   // Previously, we used left: 100% but this caused weird behaviour where the elements would
   // get "cropped" on their right side, causing them to not come far enough back into view
   // when doing translateX(-100%). It only affected the wider elements in the group.
-  left: 0
-  // To achieve the same result as left: 100% without side-effects, we translateX 100vw:
-  transform: translateX(100vw)
+  right: 0
+  // To achieve the same result as left: 100% without side-effects, we have to position the
+  // element at right: 0 and then do a translateX 100% on the element to get it off the screen.
+  // The reason for this extra convoluted positioning is that if we do translateX(100vw), the
+  // content will be placed *under* the scrollbars (with left: 100%, it respected the scrollbars)
+  transform: translateX(100%)
   font-size: 1.5rem // 24px, controls sizing of other elements
 
   +below(1024px)

diff --git a/resources/views/partials/grid-overlay.blade.php b/resources/views/partials/grid-overlay.blade.php
index 02fe0e883850f715c0fce4c531658dcd7c0c5271..ed628ec6c76a4aa9b35ba2e71afe5a41e53d44ba 100644 (file)
--- a/resources/views/partials/grid-overlay.blade.php
+++ b/resources/views/partials/grid-overlay.blade.php
@@ -9,7 +9,9 @@
         top: 0;
         left: 0;
         height: 100%;
-        width: 100%;
+        /* Using a width of 100vw instead of 100% ensures that grid isn't affected by scrollbars
+        (ie. it will extend under the scrollbars instead of scaling slightly when scrollbars are present) */
+        width: 100vw;
         z-index: 9990;
     }
 
@@ -22,6 +24,8 @@
         }
     }
 
+    {{-- In the end, this isn't needed (see above) but I'll keep it here as an example of custom scrollbars --}}
+    {{--
     /* Make sure scrollbars don't cause misalignment of grid */
     /* Ref: https://dev.to/jonosellier/easy-overlay-scrollbars-variable-width-1mbh */
     *::-webkit-scrollbar {
@@ -66,8 +70,10 @@
         border: 0px solid transparent;
         box-shadow: none;
     }
+    --}}
 
 </style>
+{{--
 <script>
     // Hide scrollbar when no longer actively scrolling
     var scrollbarTimeout;
@@ -82,4 +88,5 @@
         document.body.classList.add('scrolling');
     }
 </script>
+--}}
 <div id="debugGrid"></div>