fix, style: static footer size

webui/src/components/layout/Footer.svelte

@@ -1,59 +1,22 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount } from "svelte";
-  import IconButton from "../utils/IconButton.svelte";
+  import Icon from "../utils/Icon.svelte"
   import Jobs from "./Jobs.svelte";
   import Notifications from "./Notifications.svelte";
   import { i18n } from "../../i18n";
-  const dispatch = createEventDispatcher();
 
-  let rootEl: HTMLElement;
-  let contentEl: HTMLElement;
-  let contentHeight = 0;
   let hidden = true;
-
   let activeJobs: number;
 
-  onMount(() => {
-    const rootObserver = new ResizeObserver((entries) => {
-      // should be only one
-      entries.forEach((entry) => {
-        dispatch("resize", entry.contentRect.height);
-      });
-    });
-    rootObserver.observe(rootEl);
-
-    const contentObserver = new ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        contentHeight = entry.contentRect.height;
-      });
-    });
-    contentObserver.observe(contentEl);
-
-    rootEl.style.top = `${rootEl.getBoundingClientRect().top}px`;
-  });
-
-  function toggleHidden() {
-    if (hidden) {
-      rootEl.style.top = "unset";
-    }
-    hidden = !hidden;
-  }
-
-  function onTransitionEnd(ev: TransitionEvent) {
-    if (ev.propertyName === "bottom" && hidden) {
-      rootEl.style.top = `${rootEl.getBoundingClientRect().top}px`;
-    }
-  }
+  let infoHeight = -1;
 </script>
 
 <footer
   id="footer"
-  bind:this={rootEl}
   class:hidden
-  style="--contentHeight: {contentHeight}px"
-  on:transitionend={onTransitionEnd}
+  style="--info-height: -{infoHeight}px"
 >
-  <div class="status">
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div class="status" bind:clientHeight={infoHeight} on:click={() => hidden = !hidden}>
     <div class="info">
       {#if activeJobs > 0}
         {$i18n.t("Active jobs:")} {activeJobs}
@@ -62,15 +25,12 @@
       {/if}
     </div>
     <div class="icons">
-      {#if contentHeight > 0}
-        <IconButton
+        <Icon
           name="{hidden ? 'up' : 'down'}-arrow"
-          on:click={toggleHidden}
         />
-      {/if}
     </div>
   </div>
-  <div class="content" bind:this={contentEl}>
+  <div class="content">
     <Notifications />
     <Jobs bind:active={activeJobs} />
   </div>
@@ -90,7 +50,7 @@
   }
 
   footer.hidden {
-    bottom: calc(var(--contentHeight) * -1);
+    bottom: -20vh;
   }
 
   .status {
@@ -102,6 +62,8 @@
     top: 0;
     width: 100%;
 
+    cursor: pointer;
+
     .info {
       flex-grow: 1;
       opacity: 0.75;
@@ -110,6 +72,8 @@
 
   .content {
     margin-top: 2em;
+    overflow-y: scroll;
+    height: 20vh;
   }
 
   :global(#footer .content > *) {