style, fix: footer with notifications, styling improvements

webui/src/components/layout/Footer.svelte

@@ -1,22 +1,19 @@
 <script lang="ts">
-  import Icon from "../utils/Icon.svelte"
+  import Icon from "../utils/Icon.svelte";
   import Jobs from "./Jobs.svelte";
   import Notifications from "./Notifications.svelte";
   import { i18n } from "../../i18n";
 
   let hidden = true;
   let activeJobs: number;
-
-  let infoHeight = -1;
 </script>
 
-<footer
+<footer id="footer" class:hidden>
-  id="footer"
+  <div class="notifications">
-  class:hidden
+    <Notifications />
-  style="--info-height: -{infoHeight}px"
+  </div>
->
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="status" bind:clientHeight={infoHeight} on:click={() => hidden = !hidden}>
+  <div class="status" on:click={() => (hidden = !hidden)}>
     <div class="info">
       {#if activeJobs > 0}
         {$i18n.t("Active jobs:")} {activeJobs}
@@ -25,13 +22,10 @@
       {/if}
     </div>
     <div class="icons">
-        <Icon
+      <Icon name="{hidden ? 'up' : 'down'}-arrow" />
-          name="{hidden ? 'up' : 'down'}-arrow"
-        />
     </div>
   </div>
-  <div class="content">
+  <div class="jobs">
-    <Notifications />
     <Jobs bind:active={activeJobs} />
   </div>
 </footer>
@@ -41,26 +35,32 @@
     position: fixed;
     bottom: 0;
     width: 100%;
+
     display: flex;
     flex-direction: column;
+
+    & > * {
+      padding: 0 0.5rem;
+    }
+
     background: var(--background);
     border-top: 1px solid var(--foreground-lighter);
 
     transition: 0.7s bottom ease;
+
+    --height: calc(100vh / 6);
   }
 
   footer.hidden {
-    bottom: -20vh;
+    bottom: calc(var(--height) * -1);
   }
 
   .status {
+    height: 2rem;
+    width: 100%;
+
     display: flex;
     align-items: center;
-    height: 2em;
-    padding: 0.2em;
-    position: absolute;
-    top: 0;
-    width: 100%;
 
     cursor: pointer;
 
@@ -70,13 +70,23 @@
     }
   }
 
-  .content {
+  .notifications,
-    margin-top: 2em;
+  .jobs {
-    overflow-y: scroll;
+    display: flex;
-    height: 20vh;
+    flex-direction: column;
+    gap: 0.25rem;
   }
 
-  :global(#footer .content > *) {
+  :global(.notifications > *:first-child) {
-    margin: 0.5rem;
+    padding-top: 0.5rem;
+  }
+
+  .jobs {
+    overflow-y: scroll;
+    height: var(--height);
+
+    padding-top: 0.5rem;
+
+    background: var(--background-lighter);
   }
 </style>