From b3ee77f9a88aba00beb46c45781bdf0b4fc88602 Mon Sep 17 00:00:00 2001
From: Micha <michabokelmann@web.de>
Date: Thu, 19 Jun 2025 15:22:20 +0200
Subject: [PATCH] feat: implement responsive expansion for Toaster component

---
 src/app/globals.css                 |  2 +-
 src/components/misc/toast-inner.tsx |  3 +--
 src/components/ui/sonner.tsx        | 19 ++++++++++++++++++-
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 730b681..f3f897b 100644
--- a/src/app/globals.css
+++ b/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;
diff --git a/src/components/misc/toast-inner.tsx b/src/components/misc/toast-inner.tsx
index 86cc3f1..3e7fb75 100644
--- a/src/components/misc/toast-inner.tsx
+++ b/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 w-120 rounded p-4 ${bgColor} select-none`}>
+    <div className={`relative sm:w-120 rounded p-4 ${bgColor} select-none`}>
       {/* Close Button */}
       <button
         onClick={() => toast.dismiss(toastId)}
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 9bfe21d..38b3ce9 100644
--- a/src/components/ui/sonner.tsx
+++ b/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}
     />
   );