fix wide logo overlap issues

src/components/desktop_nav/desktop_nav.scss

@@ -9,7 +9,7 @@
   .inner-nav {
     display: grid;
     grid-template-rows: var(--navbar-height);
-    grid-template-columns: 2fr auto 2fr;
+    grid-template-columns: minmax(5em, 1fr) auto minmax(5em, 1fr);
     grid-template-areas: "sitename logo actions";
     box-sizing: border-box;
     padding: 0 1.2em;
@@ -31,7 +31,7 @@
   }
 
   &.-logoLeft .inner-nav {
-    grid-template-columns: auto 2fr 2fr;
+    grid-template-columns: auto minmax(5em, 1fr) minmax(5em, 1fr);
     grid-template-areas: "logo sitename actions";
   }
 
@@ -92,23 +92,18 @@
 
   .actions {
     grid-area: actions;
+    justify-content: flex-end;
+    text-align: right;
+    z-index: 1;
   }
 
   .item {
-    flex: 1;
     line-height: var(--navbar-height);
     height: var(--navbar-height);
-    overflow: hidden;
     display: flex;
-    flex-wrap: wrap;
-
-    &.right {
-      justify-content: flex-end;
-      text-align: right;
-    }
   }
 
   .spacer {
-    width: 1em;
+    min-width: 1em;
   }
 }

src/components/desktop_nav/desktop_nav.vue

@@ -32,11 +32,12 @@
         >
       </router-link>
       <div class="item right actions">
-        <search-bar
+        <SearchBar
           v-if="currentUser || !privateMode"
           @toggled="onSearchBarToggled"
           @click.stop
         />
+        <template v-if="searchBarHidden">
           <button
             class="button-unstyled nav-icon"
             :title="$t('nav.preferences')"
@@ -74,6 +75,7 @@
               icon="sign-out-alt"
             />
           </button>
+        </template>
       </div>
     </div>
     <teleport to="#modal">

src/components/search_bar/search_bar.vue

@@ -51,8 +51,6 @@
           class="cancel-icon fa-scale-110 fa-old-padding"
         />
       </button>
-      <span class="spacer" />
-      <span class="spacer" />
     </template>
   </div>
 </template>
@@ -61,18 +59,14 @@
 
 <style lang="scss">
 .SearchBar {
-  display: inline-flex;
+  display: flex;
   align-items: baseline;
   vertical-align: baseline;
   justify-content: flex-end;
 
-  &.-expanded {
-    width: 100%;
-  }
-
   .search-bar-input,
   .search-button {
-    height: 29px;
+    height: 2em;
   }
 
   .search-bar-input {