From 0eda151418c8894df63aac9be06919d3abed1d16 Mon Sep 17 00:00:00 2001
From: Joe Boccanfuso <109477394+jbocce@users.noreply.github.com>
Date: Wed, 10 May 2023 09:07:17 -0400
Subject: [PATCH] fix(UI) - fixed the spacing and positioning of the close
 button in the SnackbarItem component (#3380)

---
 .../ui/src/components/Snackbar/SnackbarItem.tsx  | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/platform/ui/src/components/Snackbar/SnackbarItem.tsx b/platform/ui/src/components/Snackbar/SnackbarItem.tsx
index 25b1e0c02..7ed192ffd 100644
--- a/platform/ui/src/components/Snackbar/SnackbarItem.tsx
+++ b/platform/ui/src/components/Snackbar/SnackbarItem.tsx
@@ -37,15 +37,9 @@ const SnackbarItem = ({ options, onClose }) => {
         typeClasses[options.type]
       )}
     >
-      <div className="flex ">
-        <div
-          onClick={handleClose}
-          className="w-5 h-5 rounded-full absolute flex items-center justify-center right-0 top-0 mr-2 mt-2 text-[#0944b3]"
-        >
-          <Icon name="close" className="w-5 h-5 text-black" />
-        </div>
+      <div className="flex">
         <Icon name={iconClasses[options.type]} className="w-5 h-5 mt-[1px]" />
-        <div className="flex-col ml-2">
+        <div className="flex-col mx-2">
           {/* </span> */}
           {options.title && (
             <div className="break-normal text-lg font-bold text-black">
@@ -58,6 +52,12 @@ const SnackbarItem = ({ options, onClose }) => {
             </div>
           )}
         </div>
+        <div
+          onClick={handleClose}
+          className="w-5 h-5 rounded-full flex items-center justify-center self-start ml-auto relative left-[3px] top-[-3px] text-[#0944b3]"
+        >
+          <Icon name="close" className="w-5 h-5 text-black" />
+        </div>
       </div>
     </div>
   );