M: Fix react-toaster size for small screens

rsconcept/frontend/src/app/application-layout.tsx

@@ -27,7 +27,7 @@ export function ApplicationLayout() {
     <NavigationState>
       <div className='min-w-80 antialiased h-full max-w-480 mx-auto'>
         <ToasterThemed
-          className={clsx('text-[14px]/[20px]', noNavigationAnimation ? 'mt-6' : 'mt-14')}
+          className={clsx('sm:text-[14px]/[20px] text-[12px]/[16px]', noNavigationAnimation ? 'mt-6' : 'mt-14')}
           autoClose={3000}
           draggable={false}
           pauseOnFocusLoss={false}

rsconcept/frontend/src/styling/overrides.css

@@ -7,6 +7,12 @@
 :root {
   /* Import overrides */
   --toastify-color-dark: var(--clr-prim-300);
+
+  --toastify-toast-width: 20rem;
+  --toastify-toast-padding: 0.75rem;
+
+  --toastify-toast-min-height: 4rem;
+  --toastify-toast-max-height: 40rem;
 }
 
 .cm-tooltip {