From e1635a36c848bceeca622137ffd1028389adfc5d Mon Sep 17 00:00:00 2001
From: Coteh <3276350+Coteh@users.noreply.github.com>
Date: Sun, 6 Mar 2022 16:57:56 -0500
Subject: [PATCH] Shrink line spacing when searching even further, now looks
 close to how it looks when not searching

Also fix issue where the last line's dropdown is cut off and creates overflow on the events container. Fixed this by (1) moving the last dropdown up a bit and (2) setting the event container's overflow property as `hidden`
---
 assets/components/DropdownMenu.vue | 17 +++++++++++++++--
 assets/components/LogViewer.vue    |  5 +++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/assets/components/DropdownMenu.vue b/assets/components/DropdownMenu.vue
index 380dcf4f..2f1691bb 100644
--- a/assets/components/DropdownMenu.vue
+++ b/assets/components/DropdownMenu.vue
@@ -23,8 +23,21 @@
   border: none;
   padding: 0.1em;
   height: 100%;
+
+  & > .icon {
+    height: 100%;
+    & > svg {
+      height: 0.85em;
+    }
+  }
 }
-.is-top .dropdown-menu {
-  top: 0;
+.is-top {
+  & .dropdown-menu {
+    top: 0;
+  }
+
+  &.is-last .dropdown-menu {
+    top: -30px;
+  }
 }
 </style>
diff --git a/assets/components/LogViewer.vue b/assets/components/LogViewer.vue
index 734a31a5..938b405a 100644
--- a/assets/components/LogViewer.vue
+++ b/assets/components/LogViewer.vue
@@ -1,14 +1,14 @@
 <template>
   <ul class="events" :class="size" ref="events">
     <li
-      v-for="item in filtered"
+      v-for="(item, index) in filtered"
       :key="item.key"
       :data-event="item.event"
       :data-key="item.key"
       :class="item.selected ? 'selected' : ''"
     >
       <div class="line-options" v-if="isSearching()">
-        <dropdown-menu class="is-top minimal">
+        <dropdown-menu :class="{ 'is-last': index === filtered.length - 1 }" class="is-top minimal">
           <a class="dropdown-item" @click="jumpToLine">
             <div class="level is-justify-content-start">
               <div class="level-left">
@@ -83,6 +83,7 @@ const jumpToLine = async (e) => {
 .events {
   padding: 1em;
   font-family: SFMono-Regular, Consolas, Liberation Mono, monaco, Menlo, monospace;
+  overflow: hidden;
 
   & > li {
     display: flex;