From 02ada20ce5f0d332501056057df8e6d5a351d8c8 Mon Sep 17 00:00:00 2001
From: Peter Ling <pling@scottlogic.com>
Date: Tue, 28 Nov 2023 14:37:03 +0000
Subject: [PATCH 1/2] SLVUU-123: Add nominal timeout before setting toast
 position

---
 .../vuu-popups/src/notifications/NotificationsProvider.tsx   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/vuu-ui/packages/vuu-popups/src/notifications/NotificationsProvider.tsx b/vuu-ui/packages/vuu-popups/src/notifications/NotificationsProvider.tsx
index eadbc5825..37964aba6 100644
--- a/vuu-ui/packages/vuu-popups/src/notifications/NotificationsProvider.tsx
+++ b/vuu-ui/packages/vuu-popups/src/notifications/NotificationsProvider.tsx
@@ -94,7 +94,10 @@ export const ToastNotification = (props: ToastNotificationProps) => {
   const [right, setRight] = useState(-toastWidth - toastContainerRightPadding);
 
   useEffect(() => {
-    setRight(toastContainerRightPadding);
+    setTimeout(
+      () => setRight(toastContainerRightPadding)
+    );
+
     if (animated) {
       setTimeout(
         () => setRight(-toastWidth - toastContainerRightPadding),

From 019035081c696e07a77ec2fd448d4311dc7ac826 Mon Sep 17 00:00:00 2001
From: Peter Ling <pling@scottlogic.com>
Date: Tue, 28 Nov 2023 17:15:55 +0000
Subject: [PATCH 2/2] SLVUU-123: Remove toastContainer class

---
 .../src/notifications/NotificationsProvider.tsx        |  1 -
 .../vuu-popups/src/notifications/notifications.css     | 10 ----------
 2 files changed, 11 deletions(-)

diff --git a/vuu-ui/packages/vuu-popups/src/notifications/NotificationsProvider.tsx b/vuu-ui/packages/vuu-popups/src/notifications/NotificationsProvider.tsx
index 37964aba6..9fd2c67e9 100644
--- a/vuu-ui/packages/vuu-popups/src/notifications/NotificationsProvider.tsx
+++ b/vuu-ui/packages/vuu-popups/src/notifications/NotificationsProvider.tsx
@@ -60,7 +60,6 @@ export const NotificationsProvider = (props: {
   return (
     <NotificationsContext.Provider value={{ notify }}>
       <div
-        className={`${classBase}-toastContainer`}
         style={{
           width:
             toastWidth + toastContainerRightPadding + toastContainerLeftPadding,
diff --git a/vuu-ui/packages/vuu-popups/src/notifications/notifications.css b/vuu-ui/packages/vuu-popups/src/notifications/notifications.css
index d49c8d00c..8623c6f4b 100644
--- a/vuu-ui/packages/vuu-popups/src/notifications/notifications.css
+++ b/vuu-ui/packages/vuu-popups/src/notifications/notifications.css
@@ -1,13 +1,3 @@
-.vuuToastNotifications-toastContainer {
-    --top: 60px;
-    position: absolute;
-    right: 0;
-    top: var(--top);
-    overflow: hidden;
-    height:calc(100% - var(--top));
-    font-size: 12px;
-}
-
 .vuuToastNotifications-toast {
     --vuu-icon-size: 24px;
     position: absolute;