feat: support guest session (#919)

components/toast.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import React, { ReactNode } from 'react';
+import React, { useEffect, useRef, useState, type ReactNode } from 'react';
 import { toast as sonnerToast } from 'sonner';
 import { CheckCircleFillIcon, WarningIcon } from './icons';
+import { cn } from '@/lib/utils';
 
 const iconsByType: Record<'success' | 'error', ReactNode> = {
   success: <CheckCircleFillIcon />,
@@ -18,20 +19,48 @@ export function toast(props: Omit<ToastProps, 'id'>) {
 function Toast(props: ToastProps) {
   const { id, type, description } = props;
 
+  const descriptionRef = useRef<HTMLDivElement>(null);
+  const [multiLine, setMultiLine] = useState(false);
+
+  useEffect(() => {
+    const el = descriptionRef.current;
+    if (!el) return;
+
+    const update = () => {
+      const lineHeight = Number.parseFloat(getComputedStyle(el).lineHeight);
+      const lines = Math.round(el.scrollHeight / lineHeight);
+      setMultiLine(lines > 1);
+    };
+
+    update(); // initial check
+    const ro = new ResizeObserver(update); // re-check on width changes
+    ro.observe(el);
+
+    return () => ro.disconnect();
+  }, [description]);
+
   return (
     <div className="flex w-full toast-mobile:w-[356px] justify-center">
       <div
         data-testid="toast"
         key={id}
-        className="bg-zinc-100 p-3 rounded-lg w-full toast-mobile:w-fit flex flex-row gap-2 items-center"
+        className={cn(
+          'bg-zinc-100 p-3 rounded-lg w-full toast-mobile:w-fit flex flex-row gap-3',
+          multiLine ? 'items-start' : 'items-center',
+        )}
       >
         <div
           data-type={type}
-          className="data-[type=error]:text-red-600 data-[type=success]:text-green-600"
+          className={cn(
+            'data-[type=error]:text-red-600 data-[type=success]:text-green-600',
+            { 'pt-1': multiLine },
+          )}
         >
           {iconsByType[type]}
         </div>
-        <div className="text-zinc-950 text-sm">{description}</div>
+        <div ref={descriptionRef} className="text-zinc-950 text-sm">
+          {description}
+        </div>
       </div>
     </div>
   );