From a08013ae50179fb4044297ae7782c79a4c820d73 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Thu, 8 Jun 2023 14:16:50 +0200
Subject: [PATCH] mobile first approach for notifications

---
 .../src/components/NotificationToast.svelte   | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/bridge-ui/src/components/NotificationToast.svelte b/packages/bridge-ui/src/components/NotificationToast.svelte
index 575d1c31d2c..39fd8720b83 100644
--- a/packages/bridge-ui/src/components/NotificationToast.svelte
+++ b/packages/bridge-ui/src/components/NotificationToast.svelte
@@ -54,25 +54,31 @@
 </div>
 
 <style>
-  /* TODO: Small devices. We need design!! */
   .toast {
-    --toastContainerRight: 1rem;
+    --toastContainerRight: auto;
     --toastContainerBottom: auto;
-    --toastContainerTop: 5rem;
-    --toastWidth: 100%;
+    --toastContainerTop: 4rem;
+    --toastContainerLeft: calc(50vw - 150px);
+    --toastWidth: 300px;
     --toastMinHeight: 2rem;
     --toastPadding: 0 0.5rem;
     --toastBorderRadius: 0.4rem;
     --toastColor: #e3e3e3;
   }
 
-  /* 
-    TODO: decides at which breakpoint we are no longer
-          in small screens. Design!!
-   */
+  /* sm */
   @media (min-width: 640px) {
     .toast {
-      --toastWidth: 18rem;
+      --toastWidth: 20rem;
+      --toastContainerRight: 0.5rem;
+      --toastContainerLeft: auto;
+    }
+  }
+
+  /* md */
+  @media (min-width: 768px) {
+    .toast {
+      --toastContainerRight: 1.5rem;
     }
   }
 </style>