Some CSS cleanup

public/css/index-tailwind-output.css

@@ -781,10 +781,6 @@ video {
   float: left;
 }
 
-.m-8 {
-  margin: 2rem;
-}
-
 .m-4 {
   margin: 1rem;
 }
@@ -797,6 +793,10 @@ video {
   margin: 0px;
 }
 
+.m-8 {
+  margin: 2rem;
+}
+
 .m-2 {
   margin: 0.5rem;
 }
@@ -900,10 +900,6 @@ video {
   margin-right: 4rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -936,6 +932,10 @@ video {
   margin-right: 0.25rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -1163,6 +1163,10 @@ video {
   height: 20rem;
 }
 
+.h-36 {
+  height: 9rem;
+}
+
 .h-56 {
   height: 14rem;
 }
@@ -1580,6 +1584,10 @@ video {
   overflow: hidden;
 }
 
+.overflow-scroll {
+  overflow: scroll;
+}
+
 .overflow-x-auto {
   overflow-x: auto;
 }

src/UI/AllThemesGui.svelte

@@ -100,7 +100,7 @@
       <input
         autofocus
         bind:value={$themeSearchText}
-        class="mr-4 w-full"
+        class="mr-4 w-full outline-none"
         id="theme-search"
         type="search"
         use:placeholder={tr.searchForATheme}

src/UI/BigComponents/Geosearch.svelte

@@ -113,7 +113,7 @@
     {:else}
       <input
         type="search"
-        class="w-full"
+        class="w-full outline-none"
         bind:this={inputElement}
         on:keypress={(keypr) => {
           feedback = undefined

src/UI/InputElement/Helpers/NameSuggestionIndexInput.svelte

@@ -5,6 +5,8 @@
   import * as nsiFeatures from "../../../../node_modules/name-suggestion-index/dist/featureCollection.json"
   import { LocationConflation } from "@rapideditor/location-conflation"
   import * as turf from "@turf/turf"
+  import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import { twMerge } from "tailwind-merge"
 
   const nsiFile: NSIFile = nsi
   const loco = new LocationConflation(nsiFeatures)
@@ -22,8 +24,6 @@
   let maintag = helperArgs[0].toString()
   let tag = key
 
-  let selectedItem: NSIItem
-
   const path = `${tag}s/${maintag.split("=")[0]}/${maintag.split("=")[1]}`
 
   // Check if the path exists in the NSI file
@@ -34,6 +34,8 @@
 
   let items = nsiFile.nsi[path].items
 
+  let selectedItem: NSIItem = items.find((item) => item.tags[tag] === value.data)
+
   // Get the coordinates if the feature is a point, otherwise use the center
   let lon: number
   let lat: number
@@ -62,7 +64,6 @@
       }
       return true
     })
-    .slice(0, 25)
 
   /**
    * Some interfaces for the NSI files
@@ -121,11 +122,17 @@
 </script>
 
 <div>
-  <input type="text" placeholder="Filter entries" bind:value={filter} />
+  <div class="normal-background my-2 flex w-5/6 justify-between rounded-full pl-2">
-  <div class="flex h-32 w-full flex-wrap overflow-hidden">
+    <input type="text" placeholder="Filter entries" bind:value={filter} class="outline-none" />
+    <SearchIcon aria-hidden="true" class="h-6 w-6 self-end" />
+  </div>
+  <div class="flex h-36 w-full flex-wrap overflow-scroll">
     {#each filteredItems as item}
       <div
-        class="m-1 h-fit rounded-full border border-black p-4 text-center"
+        class={twMerge(
+          "m-1 h-fit rounded-full border-2 border-black p-4 text-center",
+          selectedItem === item ? "interactive" : "bg-white"
+        )}
         on:click={() => {
           select(item)
         }}