From 1104012abbd3e5e450d4c4dfa4cbfec3ffb166de Mon Sep 17 00:00:00 2001
From: bloodwiing <bloodwiing+git@alchemix.dev>
Date: Tue, 21 May 2024 17:19:31 +0300
Subject: [PATCH] Design: Hidden scrolling for Toasts

---
 src/comp/toast/toastmanager.svelte | 33 ++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/comp/toast/toastmanager.svelte b/src/comp/toast/toastmanager.svelte
index eb46251..e5dd0af 100644
--- a/src/comp/toast/toastmanager.svelte
+++ b/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>