Design: Hidden scrolling for Toasts

src/comp/toast/toastmanager.svelte

@@ -10,25 +10,40 @@
 
 <style lang="scss">
   .toasts {
-    display: flex;
-    flex-flow: column nowrap; 
-    align-items: end;
-    justify-content: end;
     top: calc(100dvh - 16px);
     transform: translateY(-100%);
     width: max-content;
     right: 16px;
-    gap: 16px;
-    overflow: hidden;
+    overflow-y: scroll;
+    overflow-y: -moz-scrollbars-none;
+    overflow-x: hidden;
+    scrollbar-width: none; /* Firefox */
     padding: 2px;
     position: fixed;
+    max-height: calc(100dvh - 32px);
 
     z-index: 999;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .list {
+    display: flex;
+    flex-flow: column nowrap; 
+    align-items: end;
+    justify-content: end;
+    width: max-content;
+    gap: 16px;
+    height: max-content;
   }
 </style>
 
 <div role="none" class="toasts" on:mouseenter={() => {expand = true;}} on:mouseleave={() => {expand = false;}}>
-  {#each $toasts as toast (toast.id)}
-  <Toast id={toast.id} toast={toast} expand={expand}></Toast>
-  {/each}
+  <div class="list">
+    {#each $toasts as toast (toast.id)}
+    <Toast id={toast.id} toast={toast} expand={expand}></Toast>
+    {/each}
+  </div>
 </div>