fix sonner

app/globals.css

@@ -197,45 +197,6 @@ html[lang="ar"] {
   color: hsl(var(--foreground));
 }
 
-[data-sonner-toaster][data-x-position="center"] {
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  transform: none;
-}
-
-[data-sonner-toaster][data-x-position="center"] [data-sonner-toast] {
-  width: fit-content;
-  min-width: 0;
-  max-width: min(calc(100vw - 2rem), 32rem);
-  margin-inline: 0;
-}
-
-@media (max-width: 600px) {
-  [data-sonner-toaster][data-x-position="center"] {
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    transform: none;
-  }
-
-  [data-sonner-toaster][data-x-position="center"] [data-sonner-toast] {
-    width: fit-content;
-    max-width: calc(100vw - 2rem);
-    margin-inline: 0;
-  }
-
-  [data-sonner-toaster][dir="rtl"][data-x-position="center"] {
-    left: 0;
-    right: 0;
-    transform: none;
-  }
-}
-
 @layer utilities {
   .hero-noise {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");

components/layout/site-header.tsx

@@ -69,6 +69,7 @@ function NavLinks({
   const t = useTranslations("navigation");
   const currentPath = stripLocalePrefix(pathname);
   const isArabic = locale === "ar";
+  const activeIndicatorLayoutId = mobile ? "mobile-site-nav-active-pill" : "site-nav-active-pill";
 
   return (
     <>
@@ -124,7 +125,11 @@ function NavLinks({
               onClick={onNavigate}
             >
               {isActive ? (
-                <span className="absolute inset-0 -z-10 rounded-pill bg-primary shadow-xs" />
+                <motion.span
+                  layoutId={activeIndicatorLayoutId}
+                  className="absolute inset-0 -z-10 rounded-pill bg-primary shadow-xs"
+                  transition={{ type: "spring", stiffness: 420, damping: 34, mass: 0.7 }}
+                />
               ) : null}
               {itemLabel}
             </Link>

components/ui/sonner.tsx

@@ -2,9 +2,11 @@
 
 import { usePathname } from "next/navigation";
 import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
+import { useEffect, useState, type CSSProperties } from "react";
 import { Toaster as Sonner, type ToasterProps } from "sonner";
 
+import { cn } from "@/lib/utils";
+
 export function Toaster(props: ToasterProps) {
   const pathname = usePathname();
   const { resolvedTheme = "light" } = useTheme();
@@ -15,15 +17,31 @@ export function Toaster(props: ToasterProps) {
   }, [pathname]);
 
   const isArabic = documentLang === "ar";
-  const toastFontFamily = isArabic ? "var(--font-dubai), sans-serif" : "var(--font-museo), sans-serif";
+  const toastFontClassName = isArabic ? "font-arabic text-right tracking-normal" : "font-latin text-left";
+  const toasterStyle: CSSProperties & Record<"--width", string> = {
+    "--width": "max-content",
+    left: "50%",
+    right: "auto",
+    transform: "translateX(-50%)",
+    ...(props.style ?? {}),
+  };
 
   return (
     <Sonner
+      {...props}
+      dir={props.dir ?? "ltr"}
       theme={resolvedTheme as ToasterProps["theme"]}
-      position="top-center"
+      position={props.position ?? "top-center"}
-      duration={1800}
+      duration={props.duration ?? 1800}
+      closeButton={props.closeButton ?? false}
+      offset={props.offset ?? "16px"}
+      mobileOffset={props.mobileOffset ?? "16px"}
+      className={cn("toaster group", props.className)}
+      style={toasterStyle}
       toastOptions={{
+        ...props.toastOptions,
         style: {
+          ...(props.toastOptions?.style ?? {}),
           borderRadius: "16px",
           padding: "10px 12px",
           minWidth: "0",
@@ -31,22 +49,41 @@ export function Toaster(props: ToasterProps) {
           background: "hsl(var(--card))",
           color: "hsl(var(--card-foreground))",
           border: "1px solid hsl(var(--border))",
-          fontFamily: toastFontFamily,
+          direction: isArabic ? "rtl" : "ltr",
+          textAlign: isArabic ? "right" : "left",
         },
         classNames: {
-          toast:
+          ...props.toastOptions?.classNames,
-            "min-w-0 max-w-[min(calc(100vw-2rem),32rem)] rounded-[16px] border border-border bg-card px-3 py-2 text-card-foreground shadow-panel",
+          toast: cn(
-          default:
+            "group toast group-[.toaster]:min-w-0 group-[.toaster]:w-fit group-[.toaster]:max-w-[min(calc(100vw-2rem),32rem)] group-[.toaster]:rounded-[16px] group-[.toaster]:border group-[.toaster]:border-border group-[.toaster]:bg-card group-[.toaster]:px-3 group-[.toaster]:py-2 group-[.toaster]:text-card-foreground group-[.toaster]:shadow-panel",
+            toastFontClassName,
+            props.toastOptions?.classNames?.toast,
+          ),
+          title: cn(
+            "text-[13px] font-medium leading-5",
+            isArabic ? "text-right" : "text-left",
+            props.toastOptions?.classNames?.title,
+          ),
+          description: cn(
+            "text-[13px] leading-5 text-muted-foreground",
+            isArabic ? "text-right" : "text-left",
+            props.toastOptions?.classNames?.description,
+          ),
+          default: cn(
             "border-border bg-card text-card-foreground",
-          title: "text-[13px] font-medium leading-5",
+            props.toastOptions?.classNames?.default,
-          description: "text-[13px] leading-5 text-muted-foreground",
+          ),
-          success:
+          success: cn(
             "border-status-success/30 bg-status-success-soft text-status-success dark:border-status-success/40 dark:bg-status-success-soft dark:text-status-success",
-          error:
+            props.toastOptions?.classNames?.success,
+          ),
+          error: cn(
             "border-destructive/30 bg-destructive/10 text-destructive dark:border-destructive/40 dark:bg-destructive/20 dark:text-destructive-foreground",
+            props.toastOptions?.classNames?.error,
+          ),
+          closeButton: "hidden",
         },
       }}
-      {...props}
     />
   );
 }