fix footer obscuring bottom of content

ui/src/App.svelte

@@ -22,9 +22,15 @@
   );
 
   const history = createHistory(createHashSource());
+
+  let footerHeight = "0";
+  function setBottomMargin(size: CustomEvent<ResizeObserverEntry>) {
+    footerHeight = `${size.detail.contentRect.height}px`;
+  }
 </script>
 
-<Router {history} primary={false}>
+
+<Router {history} primary={false} --footer-height={footerHeight} >
   <Header />
 
   <Route path="/">
@@ -39,7 +45,7 @@
     <Search query={params.query} />
   </Route>
 
-  <Footer />
+  <Footer on:resize={setBottomMargin} />
 </Router>
 
 <style global lang="scss">

ui/src/components/layout/Footer.svelte

@@ -1,9 +1,20 @@
 <script lang="ts">
+  import { createEventDispatcher, onMount } from "svelte";
   import Jobs from "./Jobs.svelte";
   import Notifications from "./Notifications.svelte";
+  const dispatch = createEventDispatcher();
+
+  let root: HTMLElement;
+
+  onMount(() => {
+    const observer = new ResizeObserver((entries) => {
+      entries.forEach((entry) => dispatch("resize", entry));
+    });
+    observer.observe(root);
+  });
 </script>
 
-<footer id="footer">
+<footer id="footer" bind:this={root}>
   <Notifications />
   <Jobs />
 </footer>

ui/src/views/Browse.svelte

@@ -64,6 +64,7 @@
     //                  header   margin magic
     height: calc(100% - 3.5rem - 1rem - 1px);
     margin-top: 1rem;
+    margin-bottom: var(--footer-height);
   }
 
   .view {