refactor(search): don't hardcode scrollbar width

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

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">