Cody/refine toast styling (#607)

Closes #500 - Modified the position of the toaster to place toasts in the bottom left on desktop - Added `max-width` class to Alert <img width="317" alt="Screenshot 2024-10-22 at 12 16 33 PM" src="https://github.com/user-attachments/assets/67744c2a-8ae4-44b5-bd4e-d8f468a38e8e"> <img width="1445" alt="Screenshot 2024-10-22 at 12 02 06 PM" src="https://github.com/user-attachments/assets/507eb705-b475-4062-95c9-302b611e8410"> --------- Co-authored-by: Shashi Lo <[email protected]>
LetsGetTechnical · Nov 6, 2024 · a3b8c27 · a3b8c27
1 parent 96d4679
commit a3b8c27
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx
@@ -51,7 +51,7 @@ const RootLayout = ({
                 </a>
               </div>
             </main>
-            <Toaster />
+            <Toaster position="bottom-left" />
           </AuthContextProvider>
         </ErrorBoundary>
       </body>

diff --git a/components/Alert/Alert.tsx b/components/Alert/Alert.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 const alertVariants = cva(
-  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  'relative w-full md:max-w-[25rem] rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
   {
     variants: {
       variant: {