feat: implement responsive expansion for Toaster component

src/app/globals.css

@@ -155,7 +155,7 @@ h5 {
 
 h6 {
   font-family: var(--font-heading);
-  font-size: 24px;
+  font-size: 20px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;

src/components/misc/toast-inner.tsx

@@ -106,8 +106,7 @@ export const ToastInner: React.FC<ToastInnerProps> = ({
   const Icon = Icons[iconKey] as React.ComponentType<Icons.LucideProps>;
 
   return (
-    // TODO: optimize Toaster for mobile
+    <div className={`relative sm:w-120 rounded p-4 ${bgColor} select-none`}>
-    <div className={`relative w-120 rounded p-4 ${bgColor} select-none`}>
       {/* Close Button */}
       <button
         onClick={() => toast.dismiss(toastId)}

src/components/ui/sonner.tsx

@@ -2,10 +2,27 @@
 
 import { useTheme } from 'next-themes';
 import { Toaster as Sonner, ToasterProps } from 'sonner';
+import React from 'react';
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = 'system' } = useTheme();
 
+  const [shouldExpand, setShouldExpand] = React.useState(false);
+
+  React.useEffect(() => {
+    const mediaQuery = window.matchMedia('(min-width: 600px)');
+
+    const handleScreenSizeChange = () => {
+      setShouldExpand(mediaQuery.matches);
+    };
+
+    handleScreenSizeChange(); // set initial value
+    mediaQuery.addEventListener('change', handleScreenSizeChange);
+
+    return () =>
+      mediaQuery.removeEventListener('change', handleScreenSizeChange);
+  }, []);
+
   return (
     <Sonner
       theme={theme as ToasterProps['theme']}
@@ -28,7 +45,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
       }}
       swipeDirections={['left', 'right']}
       closeButton={true}
-      expand={true}
+      expand={shouldExpand}
       {...props}
     />
   );