From b8af5c837436ee4492fededada079b83fe59275b Mon Sep 17 00:00:00 2001
From: Gleb Koval <gleb@koval.net>
Date: Mon, 16 Jun 2025 16:03:46 +0100
Subject: [PATCH] fix: put filter navigation buttons on the bottom

---
 src/app.html                   |  2 +-
 src/routes/+page.svelte        |  6 ++---
 src/routes/filter/+page.svelte | 42 ++++++++++++++++++++++------------
 3 files changed, 31 insertions(+), 19 deletions(-)
diff --git a/src/app.html b/src/app.html
index eecc1c1..ca1e115 100644
--- a/src/app.html
+++ b/src/app.html
@@ -12,6 +12,6 @@
         %sveltekit.head%
     </head>
     <body data-sveltekit-preload-data="hover">
-        <div style="display: contents">%sveltekit.body%</div>
+        <div style="display: contents; background: inherit">%sveltekit.body%</div>
     </body>
 </html>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 549da65..40de308 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -263,7 +263,7 @@
         border: none;
         color: #eaffeb;
         font-size: 1rem;
-        margin-right: 1rem;
+        margin-right: 0.5rem;
         cursor: pointer;
     }
     .fav-button:hover {
@@ -274,13 +274,13 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        margin-right: 2rem;
+        margin-right: 0.5rem;
     }
 
     .search {
         display: flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: 0.3rem;
         color: #eaffeb;
         font-size: 1rem;
     }
diff --git a/src/routes/filter/+page.svelte b/src/routes/filter/+page.svelte
index 4ed53cc..2b6e313 100644
--- a/src/routes/filter/+page.svelte
+++ b/src/routes/filter/+page.svelte
@@ -104,21 +104,6 @@
 </Navbar>
 
 <main>
-    <div class="controls">
-        <Button type="link" href="/?{newSearchParams}">Show study spaces</Button>
-        <Button
-            style="red"
-            onclick={() => {
-                openAt.from = undefined;
-                openAt.to = undefined;
-                selectedTags = [];
-                sortNear = undefined;
-                tagFilter = "";
-            }}
-        >
-            Clear
-        </Button>
-    </div>
     <h1>Search options</h1>
     <div class="time-filter-container">
         <label>
@@ -208,6 +193,23 @@
     </div>
     <div class="sortMap" bind:this={sortMapElem}></div>
 </main>
+<div class="controls">
+    <div class="controls-inner">
+        <Button type="link" href="/?{newSearchParams}">Back to study spaces</Button>
+        <Button
+            style="red"
+            onclick={() => {
+                openAt.from = undefined;
+                openAt.to = undefined;
+                selectedTags = [];
+                sortNear = undefined;
+                tagFilter = "";
+            }}
+        >
+            Clear
+        </Button>
+    </div>
+</div>
 
 <style>
     main {
@@ -219,9 +221,19 @@
         margin: auto;
     }
     .controls {
+        position: sticky;
+        background: inherit;
+        background-attachment: local;
+        padding: 0.5rem 1rem;
+        bottom: 0;
+        width: 100%;
+    }
+    .controls-inner {
         display: grid;
         grid-template-columns: 1fr 1fr;
+        max-width: 32rem;
         gap: 1rem;
+        margin: auto;
     }
     .tag-filter-container {
         display: flex;
