From f2eeea537ab4352bda681cd36309e2930ba4e35b Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Fri, 28 Jan 2022 17:28:07 +0100
Subject: [PATCH] Fix #5064 @1

---
 resources/styles/components/contact-shortcut.styl | 9 ++++++---
 resources/views/partials/grid-overlay.blade.php   | 9 ++++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/resources/styles/components/contact-shortcut.styl b/resources/styles/components/contact-shortcut.styl
index af0dc8a..697dacf 100644
--- 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 02fe0e8..ed628ec 100644
--- 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>
-- 
2.39.5