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,48 +32,50 @@
         >
       </router-link>
       <div class="item right actions">
-        <search-bar
+        <SearchBar
           v-if="currentUser || !privateMode"
           @toggled="onSearchBarToggled"
           @click.stop
         />
-        <button
-          class="button-unstyled nav-icon"
-          :title="$t('nav.preferences')"
-          @click.stop="openSettingsModal('user')"
-        >
-          <FAIcon
-            fixed-width
-            class="fa-scale-110 fa-old-padding"
-            icon="cog"
-          />
-        </button>
-        <button
-          v-if="currentUser && currentUser.role === 'admin'"
-          class="button-unstyled nav-icon"
-          target="_blank"
-          :title="$t('nav.administration')"
-          @click.stop="openSettingsModal('admin')"
-        >
-          <FAIcon
-            fixed-width
-            class="fa-scale-110 fa-old-padding"
-            icon="tachometer-alt"
-          />
-        </button>
-        <span class="spacer" />
-        <button
-          v-if="currentUser"
-          class="button-unstyled nav-icon"
-          :title="$t('login.logout')"
-          @click.stop.prevent="logout"
-        >
-          <FAIcon
-            fixed-width
-            class="fa-scale-110 fa-old-padding"
-            icon="sign-out-alt"
-          />
-        </button>
+        <template v-if="searchBarHidden">
+          <button
+            class="button-unstyled nav-icon"
+            :title="$t('nav.preferences')"
+            @click.stop="openSettingsModal('user')"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="cog"
+            />
+          </button>
+          <button
+            v-if="currentUser && currentUser.role === 'admin'"
+            class="button-unstyled nav-icon"
+            target="_blank"
+            :title="$t('nav.administration')"
+            @click.stop="openSettingsModal('admin')"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="tachometer-alt"
+            />
+          </button>
+          <span class="spacer" />
+          <button
+            v-if="currentUser"
+            class="button-unstyled nav-icon"
+            :title="$t('login.logout')"
+            @click.stop.prevent="logout"
+          >
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              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 {