diff --git a/packages/ui/components/toast/showToast.tsx b/packages/ui/components/toast/showToast.tsx
index 7b2b5e8761..0d8aaee563 100644
--- a/packages/ui/components/toast/showToast.tsx
+++ b/packages/ui/components/toast/showToast.tsx
@@ -11,10 +11,12 @@ type IToast = {
 export const SuccessToast = ({ message, toastVisible }: IToast) => (
   <div
     className={classNames(
-      "data-testid-toast-success bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md rtl:space-x-reverse",
+      "data-testid-toast-success bg-brand-500 mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md rtl:space-x-reverse md:max-w-sm",
       toastVisible && "animate-fade-in-up"
     )}>
-    <Icon.FiCheck className="h-4 w-4" />
+    <span>
+      <Icon.FiCheck className="h-4 w-4" />
+    </span>
     <p>{message}</p>
   </div>
 );
@@ -22,10 +24,12 @@ export const SuccessToast = ({ message, toastVisible }: IToast) => (
 export const ErrorToast = ({ message, toastVisible }: IToast) => (
   <div
     className={classNames(
-      "animate-fade-in-up mb-2 flex h-9 items-center space-x-2 rounded-md bg-red-100 p-3 text-sm font-semibold text-red-900 shadow-md rtl:space-x-reverse",
+      "animate-fade-in-up mb-2 flex h-auto items-center space-x-2 rounded-md bg-red-100 p-3 text-sm font-semibold text-red-900 shadow-md rtl:space-x-reverse md:max-w-sm",
       toastVisible && "animate-fade-in-up"
     )}>
-    <Icon.FiInfo className="h-4 w-4" />
+    <span>
+      <Icon.FiInfo className="h-4 w-4" />
+    </span>
     <p>{message}</p>
   </div>
 );
@@ -33,10 +37,12 @@ export const ErrorToast = ({ message, toastVisible }: IToast) => (
 export const WarningToast = ({ message, toastVisible }: IToast) => (
   <div
     className={classNames(
-      "animate-fade-in-up bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md rtl:space-x-reverse",
+      "animate-fade-in-up bg-brand-500 mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md rtl:space-x-reverse md:max-w-sm",
       toastVisible && "animate-fade-in-up"
     )}>
-    <Icon.FiInfo className="h-4 w-4" />
+    <span>
+      <Icon.FiInfo className="h-4 w-4" />
+    </span>
     <p>{message}</p>
   </div>
 );
@@ -44,10 +50,12 @@ export const WarningToast = ({ message, toastVisible }: IToast) => (
 export const DefaultToast = ({ message, toastVisible }: IToast) => (
   <div
     className={classNames(
-      "animate-fade-in-up bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md rtl:space-x-reverse",
+      "animate-fade-in-up bg-brand-500 mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md rtl:space-x-reverse md:max-w-sm",
       toastVisible && "animate-fade-in-up"
     )}>
-    <Icon.FiCheck className="h-4 w-4" />
+    <span>
+      <Icon.FiCheck className="h-4 w-4" />
+    </span>
     <p>{message}</p>
   </div>
 );