diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index d7f4145..713e2bf 100644
--- a/ui/src/App.svelte
+++ b/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">
diff --git a/ui/src/components/layout/Footer.svelte b/ui/src/components/layout/Footer.svelte
index e2d9d7f..9848169 100644
--- a/ui/src/components/layout/Footer.svelte
+++ b/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>
diff --git a/ui/src/views/Browse.svelte b/ui/src/views/Browse.svelte
index 7d17804..1ea1467 100644
--- a/ui/src/views/Browse.svelte
+++ b/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 {