Fixed notification style

Aayush259 · Nov 14, 2024 · 78f12e0 · 78f12e0
1 parent f8b2e45
commit 78f12e0
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/src/components/ToastContextProvider.jsx b/src/components/ToastContextProvider.jsx
@@ -17,7 +17,7 @@ export const ToastProvider = ({ children }) => {
 
   return (
     <ToastContext.Provider value={{ addToast }}>
-      <div className="w-fit fixed bottom-5 right-5 z-50 flex flex-col duration-500 h-fit">
+      <div className="w-screen md:w-fit fixed bottom-5 md:right-5 z-50 flex flex-col duration-500 h-fit">
         {toasts.map((toast) => (
           <Toast key={toast.id} message={toast.message} success={toast.success} onClose={() => removeToast(toast.id)} />
         ))}

diff --git a/src/components/toaster/Toast.jsx b/src/components/toaster/Toast.jsx
@@ -10,7 +10,7 @@ const Toast = ({ message, onClose, success }) => {
     }, [])
 
     return (
-        <div className="bg-slate-800 max-w-[80vw] min-w-[350px] p-3 md:py-4 md:px-8 text-center text-white flex justify-between items-center rounded-xl m-2 md:text-xl overflow-ellipsis animate-in relative overflow-hidden">
+        <div className="bg-slate-800 max-w-[80vw] w-[350px] mx-auto md:mx-0 p-3 md:py-4 md:px-8 text-center text-white flex justify-between items-center rounded-xl m-2 md:text-xl overflow-ellipsis animate-in relative overflow-hidden">
             <div
             className={`absolute h-1 left-0 bottom-0 ${success ? 'bg-green-500' : 'bg-red-500'} animate-toast`}
             />