From bfa04bfb11909c9e4af108973b5f34eaae6b9472 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Wed, 8 Nov 2017 11:26:42 +0200
Subject: [PATCH] Hide overflowing elements when userfinder is active. Don't
 scroll on button presses. Make buttons slightly bigger and more spaced out.

---
 src/App.scss                               |  6 ++++++
 src/App.vue                                |  6 +++---
 src/components/user_finder/user_finder.vue | 13 +++++++++----
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index fd44dfb8ef..0e89a429b4 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -69,6 +69,12 @@ button{
     flex: 1;
     line-height: 21px;
     height: 21px;
+    overflow: hidden;
+
+    .nav-icon {
+      font-size: 1.1em;
+      margin-left: 0.4em;
+    }
 }
 
 .gaps > .item {
diff --git a/src/App.vue b/src/App.vue
index 48cf9ea6e0..eb9bdf5d2e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,9 +6,9 @@
           <router-link :to="{ name: 'root'}">{{sitename}}</router-link>
         </div>
         <div class='item right'>
-          <user-finder></user-finder>
-          <router-link :to="{ name: 'settings'}"><i class="icon-cog"></i></router-link>
-          <a href="#" v-if="currentUser" @click.prevent="logout"><i class="icon-logout" title="Logout" ></i></a>
+          <user-finder class="nav-icon"></user-finder>
+          <router-link :to="{ name: 'settings'}"><i class="icon-cog nav-icon"></i></router-link>
+          <a href="#" v-if="currentUser" @click.prevent="logout"><i class="icon-logout nav-icon" title="Logout" ></i></a>
         </div>
       </div>
     </nav>
diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue
index 2ca476fa35..8c82a95bfe 100644
--- a/src/components/user_finder/user_finder.vue
+++ b/src/components/user_finder/user_finder.vue
@@ -1,14 +1,14 @@
 <template>
-  <span>
+  <span class="user-finder-container">
     <span class="finder-error base05" v-if="error">
       <i class="icon-cancel user-finder-icon" @click="dismissError"/>
       Error fetching user
     </span>
     <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" />
-    <a href="#" v-if="hidden"><i class="icon-user-plus user-finder-icon" @click.prevent="toggleHidden"/></a>
+    <a href="#" v-if="hidden"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden"/></a>
     <span v-else>
       <input class="user-finder-input base03-border" @keyup.enter="findUser(username)" v-model="username" placeholder="Find user" id="user-finder-input" type="text"/>
-    <i class="icon-cancel user-finder-icon" @click="toggleHidden"/>
+    <i class="icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
     </span>
   </span>
 </template>
@@ -16,8 +16,12 @@
 <script src="./user_finder.js"></script>
 
 <style lang="scss">
+ .user-finder-container {
+   height: 21px;
+   max-width: 100%;
+ }
+
  .user-finder-icon {
-   margin-right: 0.25em;
  }
 
  .user-finder-input {
@@ -25,6 +29,7 @@
    border-style: solid;
    border-color: inherit;
    border-radius: 5px;
+   max-width: 80%;
    padding: 0.1em 0.2em 0.2em 0.2em;
  }