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

@@ -23,8 +23,21 @@
   border: none;
   padding: 0.1em;
   height: 100%;
+
+  & > .icon {
+    height: 100%;
+    & > svg {
+      height: 0.85em;
+    }
+  }
 }
-.is-top .dropdown-menu {
+.is-top {
-  top: 0;
+  & .dropdown-menu {
+    top: 0;
+  }
+
+  &.is-last .dropdown-menu {
+    top: -30px;
+  }
 }
 </style>

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;