footer is actually fixed

ui/src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="app" :class="{ 'sl-theme-dark': prefersDark }">
-    <Header />
+    <header>
+      <Header />
+    </header>
     <main>
       <router-view />
     </main>
@@ -73,7 +75,7 @@ body,
   flex-direction: column;
   justify-content: space-between;
 
-  margin: 1rem;
+  margin: 1rem 0;
 
   --monospace-font: "Fira Code", "Consolas", "JetBrains Mono", "Inconsolata",
     monospace;
@@ -83,6 +85,27 @@ main {
   flex-grow: 1;
 }
 
+main,
+header {
+  margin: 0 2rem;
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
+
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+
+  background: var(--background);
+}
+
+footer > * {
+  margin: 1rem;
+}
+
 a {
   color: var(--foreground);
 }

ui/src/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header>
+  <div class="header">
     <h1>
       <router-link :to="{ name: 'home' }">
         <img class="logo" src="/assets/upend.svg" alt="UpEnd logo" />
@@ -9,7 +9,7 @@
     <sl-input placeholder="Search" v-sl-model:searchQuery>
       <sl-icon name="search" slot="prefix"></sl-icon>
     </sl-input>
-  </header>
+  </div>
 </template>
 
 <script lang="ts">
@@ -31,7 +31,7 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-header {
+.header {
   display: flex;
   align-items: center;
   padding-bottom: 0.5rem;