From fddb5409b45234a9721a9df5e7979647884e0d0a Mon Sep 17 00:00:00 2001
From: Artus <artus@landoftheunicorn.ovh>
Date: Sat, 15 Jun 2019 21:09:42 +0200
Subject: [PATCH] improves suggestion box display

---
 lootalot_front/src/components/ItemInput.vue | 26 ++++++++++++++-------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/lootalot_front/src/components/ItemInput.vue b/lootalot_front/src/components/ItemInput.vue
index 32a3c7d..ba73895 100644
--- a/lootalot_front/src/components/ItemInput.vue
+++ b/lootalot_front/src/components/ItemInput.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="container">
+<div class="container is-paddingless">
   <div class="field has-addons">
     <div class="control is-expanded" 
         :class="{'is-loading': is_loading }">
@@ -19,13 +19,18 @@
         >+</button>
       </div>
     </div>
-  <ul class="box" v-show="auto_open">
-    <li v-for="(result,i) in results" :key="i"
-      @click="setResult(result.name)"
-      >
-      {{ result.name }}
-      </li>
-    </ul>
+    <div class="dropdown" :class="{'is-active': auto_open}">
+      <div class="dropdown-menu">
+        <div class="dropdown-content">
+            <a v-for="(result,i) in results" :key="i"
+              @click="setResult(result.name)"
+              class="dropdown-item"
+              >
+              {{ result.name }}
+              </a>
+            </div>
+            </div>
+      </div>
   </div>
 </template>
 
@@ -81,3 +86,8 @@
         },
     }
 </script>
+
+<style scoped>
+    .dropdown, .dropdown-menu { min-width: 100%; margin-top: 0; padding-top: 0;}
+    .dropdown { top: -0.75rem; }
+</style>