From e1b042c9b209375b0a81998a03700a26160879a1 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Mon, 24 Aug 2020 14:24:09 +0200
Subject: [PATCH] refactor(search): don't hardcode scrollbar width

---
 client/src/components/Form/SearchForm.vue | 21 ++++++++++++++++++++-
 client/src/layouts/Default.vue            |  2 +-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/SearchForm.vue b/client/src/components/Form/SearchForm.vue
index 9466541..46d3837 100644
--- a/client/src/components/Form/SearchForm.vue
+++ b/client/src/components/Form/SearchForm.vue
@@ -102,14 +102,18 @@ export default {
 
   watch: {
     open(newVal) {
+      const header = document.querySelector('.header div')
       // Search Dropdown open
       if (newVal) {
+        console.log(this.getScrollbarWidth())
         if (!this.homepage) {
-          document.body.style.marginLeft = '-8px'
+          document.body.style.marginLeft = `-${this.getScrollbarWidth()}px`
+          header.style.paddingRight = `${this.getScrollbarWidth()}px`
         }
         document.body.style.overflow = 'hidden'
       } else {
         document.body.style.marginLeft = 0
+        header.style.paddingRight = 0
         document.body.style.overflow = 'auto'
       }
     },
@@ -139,6 +143,21 @@ export default {
         this.$emit('formSubmit', search, this.selectedRegion)
       }
     },
+    getScrollbarWidth() {
+      const outer = document.createElement('div')
+      outer.style.visibility = 'hidden'
+      outer.style.overflow = 'scroll' // forcing scrollbar to appear
+      outer.style.msOverflowStyle = 'scrollbar' // needed for WinJS apps
+      document.body.appendChild(outer)
+
+      const inner = document.createElement('div')
+      outer.appendChild(inner)
+      const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth)
+
+      outer.parentNode.removeChild(outer)
+
+      return scrollbarWidth
+    },
     handleEscape(e) {
       if (e.key === 'Esc' || e.key === 'Escape') {
         this.dropdown = false
diff --git a/client/src/layouts/Default.vue b/client/src/layouts/Default.vue
index c17360b..5b58938 100644
--- a/client/src/layouts/Default.vue
+++ b/client/src/layouts/Default.vue
@@ -9,7 +9,7 @@
 
     <header
       :class="bgHeader ? 'header-scrolled' : 'bg-transparent'"
-      class="fixed left-0 right-0 z-20 px-4 text-teal-100 transition-colors duration-100 ease-in-out border-b-2"
+      class="fixed left-0 right-0 z-20 px-4 text-teal-100 transition-colors duration-100 ease-in-out border-b-2 header"
       style="border-color: rgba(144, 205, 244, 0.4);"
     >
       <div class="flex items-center justify-between py-2 -mb-2px">