Adjusting tooltip arrow position, added open and close events. Fixed search tooltip layout.

assets/components/header/header.vue

@@ -162,8 +162,8 @@
 			<Tooltip
 				class="search-compact"
 				:open="searching"
-				@show="searching = true"
-				@hide="searching = false"
+				@open="searching = true"
+				@close="searching = false"
 			>
 				<button
 					type="button"
@@ -172,12 +172,14 @@
 					icon="search"
 				/></button>
 
-				<Search
-					slot="tooltip"
-					:searching="searching"
-					class="compact"
-					@search="searching = false"
-				/>
+				<template v-slot:tooltip>
+					<Search
+						:searching="searching"
+						class="compact"
+						@search="searching = false"
+						@click.stop
+					/>
+				</template>
 			</Tooltip>
 		</div>
 	</header>

assets/components/header/search.vue

@@ -27,10 +27,7 @@ async function search() {
 
 function searching(to) {
 	if (to) {
-		setTimeout(() => {
-			// nextTick does not seem to work
-			this.$refs.search.focus();
-		}, 20);
+		this.$refs.search.focus();
 	}
 }
 
@@ -79,12 +76,12 @@ export default {
         padding: 0;
         border: none;
 
-        .search-input {
-            border: solid 1px var(--shadow-hint);
-        }
+		.search-input {
+			padding: .75rem .5rem .75rem .75rem;
+		}
 
         .search-button {
-            padding: 0 .5rem 0 1rem;
+            padding: 1rem 1rem .75rem .25rem;
             margin: 0;
         }
     }