diff --git a/webui/src/components/layout/Footer.svelte b/webui/src/components/layout/Footer.svelte
index c68d32e..3f6fecd 100644
--- a/webui/src/components/layout/Footer.svelte
+++ b/webui/src/components/layout/Footer.svelte
@@ -6,6 +6,7 @@
 
   let hidden = true;
   let activeJobs: number;
+  $: togglable = activeJobs > 0 || !hidden;
 </script>
 
 <footer id="footer" class:hidden>
@@ -13,7 +14,7 @@
     <Notifications />
   </div>
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="status" on:click={() => (hidden = !hidden)}>
+  <div class="status" class:togglable on:click={() => (hidden = !hidden)}>
     <div class="info">
       {#if activeJobs > 0}
         {$i18n.t("Active jobs:")} {activeJobs}
@@ -64,9 +65,16 @@
 
     cursor: pointer;
 
+    &:not(.togglable) {
+      cursor: unset;
+      pointer-events: none;
+      opacity: 0.66;
+    }
+
+    transition: opacity 0.7s ease;
+
     .info {
       flex-grow: 1;
-      opacity: 0.75;
     }
   }