diff --git a/webapp/components/SearchInput.vue b/webapp/components/SearchInput.vue
index be31239bd..098b30610 100644
--- a/webapp/components/SearchInput.vue
+++ b/webapp/components/SearchInput.vue
@@ -10,9 +10,7 @@
   >
     <div class="field">
       <div class="control">
-        <a v-if="isActive" class="search-clear-btn" @click="clear">
-          &nbsp;
-        </a>
+        <a v-if="isActive" class="search-clear-btn" @click="clear">&nbsp;</a>
         <ds-select
           :id="id"
           ref="input"
@@ -41,9 +39,7 @@
           <template slot="option" slot-scope="{ option }">
             <ds-flex>
               <ds-flex-item class="search-option-label">
-                <ds-text>
-                  {{ option.label | truncate(70) }}
-                </ds-text>
+                <ds-text>{{ option.label | truncate(70) }}</ds-text>
               </ds-flex-item>
               <ds-flex-item class="search-option-meta" width="280px">
                 <ds-flex>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index c5ed6e4b2..562376a06 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -1,16 +1,17 @@
 <template>
   <div class="layout-default">
     <div class="main-navigation">
-      <ds-container class="main-navigation-container">
+      {{ this.window.height }}
+      <ds-container class="main-navigation-container" style="padding: 10px 10px;">
         <div>
           <ds-flex>
-            <ds-flex-item :width="{ base: '50px', md: '150px' }">
+            <ds-flex-item :width="{ base: '49px', md: '150px' }">
               <a v-router-link style="display: inline-flex" href="/">
                 <ds-logo />
               </a>
             </ds-flex-item>
             <ds-flex-item>
-              <div id="nav-search-box" v-on:click="unfolded" v-click-outside="foldedup">
+              <div id="nav-search-box" v-on:click="unfolded" @blur.capture="foldedup">
                 <search-input
                   id="nav-search"
                   :delay="300"
@@ -22,7 +23,7 @@
                 />
               </div>
             </ds-flex-item>
-            <ds-flex-item width="200px">
+            <ds-flex-item width="200px" style="background-color:white">
               <div class="main-navigation-right" style="float:right">
                 <no-ssr>
                   <locale-switch class="topbar-locale-switch" placement="bottom" offset="23" />
@@ -198,48 +199,9 @@ export default {
       document.getElementById('nav-search-box').classList.remove('unfolded')
     },
   },
-  directives: {
-    'click-outside': {
-      bind: function(el, binding, vNode) {
-        // Provided expression must evaluate to a function.
-        if (typeof binding.value !== 'function') {
-          const compName = vNode.context.name
-          let warn = `[Vue-click-outside:] provided expression '${binding.expression}' is not a function, but has to be`
-          if (compName) {
-            warn += `Found in component '${compName}'`
-          }
-
-          console.warn(warn)
-        }
-        // Define Handler and cache it on the element
-        const bubble = binding.modifiers.bubble
-        const handler = e => {
-          if (bubble || (!el.contains(e.target) && el !== e.target)) {
-            binding.value(e)
-          }
-        }
-        el.__vueClickOutside__ = handler
-
-        // add Event Listeners
-        document.addEventListener('click', handler)
-      },
-
-      unbind: function(el, binding) {
-        // Remove Event Listeners
-        document.removeEventListener('click', el.__vueClickOutside__)
-        el.__vueClickOutside__ = null
-      },
-    },
-  },
 }
 </script>
 <style>
-.foldedup {
-  position: '';
-  right: ;
-  left: ;
-  z-index: 1;
-}
 .unfolded {
   position: absolute;
   right: 0px;