From a3b8c27c1eef150e67faefd9238db85ba4771d54 Mon Sep 17 00:00:00 2001
From: Cody Epstein <codyepstein@gmail.com>
Date: Wed, 6 Nov 2024 10:33:17 -0800
Subject: [PATCH] Cody/refine toast styling (#607)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 <362527+shashilo@users.noreply.github.com>
---
 app/(main)/layout.tsx      | 2 +-
 components/Alert/Alert.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx
index 328a7785..8ec4a538 100644
--- 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
index fff2d4b8..48d193b3 100644
--- 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: {