Did it via flexbox + position absolute of the searchbar. Realized that that everything is a little bigger on the dummy than i assumed it was due to 90% scaling in view mode, but seems fine

frontend/src/lib/components/icon.svelte

@@ -1,15 +1,18 @@
+<!-- FIXME: deal with this mess in style property. You can't do all that right in your HTML -->
+
 <script>
     export let image = "";
-    export let onclick = () => {};
+    export let onclick;
     export let color = "var(--col_text_panel)";
     export let size = "25px";
 </script>
 
-<input class="icon" type="button" value="" style="--image: url({image}); --color: {color}; background-color: {color}; --size: {size};" on:click={onclick}>
+<input class="icon" type="button" value="" 
+style="--image: url({image}); --color: {color}; background-color: {color}; --size: {size};" 
+on:click={onclick ? onclick : null}>
 
 <style>
     .icon {
-        cursor: pointer;
         background-color: var(--color);
         object-fit: contain;
         -webkit-mask-image: var(--image);
@@ -19,4 +22,11 @@
         height: var(--size);
         width: var(--size);
     }
+
+    .clickable {
+        cursor: pointer;
+    }
+    .clickable:hover {
+        background-color: var(--col_text_hint);
+    }
 </style>