adds dark mode

web/src/routes/+page.svelte

@@ -42,7 +42,7 @@
             description: `City | ${
                 country_codes[t["country code"] as keyof typeof country_codes]
             }`,
-            value: t.id,
+            value: t,
             icon: "city",
         }));
 
@@ -50,7 +50,10 @@
     }
 
     function handleSearchClick(item: SearchItem) {
-        if (item.icon == "route") {
+
+        if(item.icon == "city") {
+            goto(`/map/?lat=${item.value._geo.lat}&lon=${item.value._geo.lng}`);
+        } if (item.icon == "route") {
             goto(`/trail/view/${item.value}`);
         }
     }

web/src/routes/map/+page.svelte

@@ -216,7 +216,7 @@
 
 <main class="grid grid-cols-[400px_1fr]">
     <div
-        class="overflow-y-scroll overflow-x-hidden flex flex-col items-center gap-4 px-8"
+        class="overflow-y-auto overflow-x-hidden flex flex-col items-center gap-4 px-8"
     >
         <Search
             extraClasses="w-full"

web/src/routes/trail/edit/[id]/+page.svelte

@@ -343,7 +343,7 @@
 <main class="grid grid-cols-[400px_1fr]">
     <form
         id="trail-form"
-        class="overflow-y-scroll overflow-x-hidden flex flex-col gap-4 px-8"
+        class="overflow-y-auto overflow-x-hidden flex flex-col gap-4 px-8"
         on:submit={handleSubmit}
     >
         <h3 class="text-xl font-semibold">Pick a trail</h3>
@@ -435,9 +435,9 @@
         >
         <hr class="border-separator"/>
         <h3 class="text-xl font-semibold">Photos</h3>
-        <div class="flex gap-4 max-w-full overflow-x-scroll shrink-0">
+        <div class="flex gap-4 max-w-full overflow-x-auto shrink-0">
             <button
-                class="btn-secondary h-32 w-32 shrink-0 grow-0 basis-auto"
+                class="btn-secondary h-32 w-32 m-2 shrink-0 grow-0 basis-auto"
                 type="button"
                 on:click={openPhotoBrowser}><i class="fa fa-plus"></i></button
             >

web/src/routes/trails/+page.svelte

@@ -195,7 +195,7 @@
                         id="{category.name}-checkbox"
                         type="checkbox"
                         value={category.id}
-                        class="w-4 h-4 accent-input-background border-input-border focus:ring-input-border-focus focus:ring-2"
+                        class="w-4 h-4 accent-input-background border-input-border focus:ring-input-ring focus:ring-2"
                         on:change={() => setCategoryFilter(category)}
                     />
                     <label