refactor: moved search into Navbar component

src/lib/components/Navbar.svelte

@@ -28,7 +28,6 @@
         background: linear-gradient(-77deg, #2e4653, #223a37);
         box-shadow: 0rem 0rem 0.5rem #182125;
         align-items: center;
-        overflow: hidden;
         z-index: 100;
     }
 

src/routes/+layout.svelte

@@ -33,6 +33,7 @@
         margin: 0;
         padding: 0;
         width: 100%;
+        overflow-x: hidden;
     }
 
     :global(html) {

src/routes/+page.svelte

@@ -110,31 +110,7 @@
 </script>
 
 <Navbar>
-    {#if session}
+    <div class="navActions">
-        <a href="/space/new/edit">
-            <img src={crossUrl} alt="new" class="new-space" />
-        </a>
-    {/if}
-</Navbar>
-
-<main>
-    {#if adminMode}
-        <div class="checkReports">
-            <Button href="/space/reports" type="link" style="red">Check Reports</Button>
-        </div>
-    {/if}
-    <div class="time-filter-container">
-        <label>
-            Open from:
-            <input type="time" bind:value={openingFilter} />
-        </label>
-        <label>
-            Open until:
-            <input type="time" bind:value={closingFilter} />
-        </label>
-    </div>
-    <div class="tag-filter-container">
-        <form>
         <div class="tagDisplay">
             {#each selectedTags as tagName (tagName)}
                 <button class="tag" onclick={deleteTag(tagName)} type="button">
@@ -182,9 +158,24 @@
                 </div>
             {/if}
         </div>
-        </form>
+        <a href="/space/new/edit">
+            <img src={crossUrl} alt="new" class="new-space" />
+        </a>
     </div>
+</Navbar>
 
+<main>
+    <div class="time-filter-container">
+        <label>
+            Open from:
+            <input type="time" bind:value={openingFilter} />
+        </label>
+        <label>
+            Open until:
+            <input type="time" bind:value={closingFilter} />
+        </label>
+    </div>
+    <a href="/space/reports" class="checkReports">Check Reports</a>
     {#each filteredStudySpaces as studySpace (studySpace.id)}
         {@const imgUrl =
             studySpace.study_space_images.length > 0
@@ -235,11 +226,14 @@
         transform: rotate(45deg);
     }
 
-    .tag-filter-container {
+    .navActions {
-        grid-column: 1 / -1;
         display: flex;
-        justify-content: center;
+        height: 100%;
-        margin-bottom: 0.5rem;
+        width: 100%;
+        align-items: center;
+        padding-left: 2rem;
+        gap: 1rem;
+        z-index: 200;
     }
 
     .time-filter-container {
@@ -264,13 +258,6 @@
         color: #eaffeb;
     }
 
-    form {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-        max-width: 32rem;
-    }
-
     .tagDisplay {
         display: flex;
         gap: 0.4rem;
@@ -330,6 +317,7 @@
         top: 100%;
         left: 50%;
         transform: translateX(-50%);
+        z-index: 1000;
     }
 
     .avaliableTag {