refactor: Update dialog components with enhanced styling and improved backdrop effects

frontend/app/(main)/dashboard/page.tsx

@@ -8,10 +8,8 @@ export const metadata: Metadata = {
 
 export default function DashboardPage() {
   return (
-    <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      <Suspense>
-        <DashboardMain />
-      </Suspense>
-    </div>
+    <Suspense>
+      <DashboardMain />
+    </Suspense>
   );
 }

frontend/app/(main)/layout.tsx

@@ -15,8 +15,10 @@ export default function ProjectLayout({
       <MemoizedManagementBar />
       <div className="flex flex-1 flex-col">
         <div className="@container/main flex flex-1 flex-col gap-2">
-          <div className="flex min-h-0 flex-1 flex-col gap-4 px-6 py-6 md:gap-6">
-            {children}
+          <div className="flex min-h-0 flex-1 flex-col px-4 py-8 sm:px-6 md:px-8 lg:px-12">
+            <div className="mx-auto flex min-h-0 w-full max-w-7xl flex-1 flex-col gap-4 md:gap-6">
+              {children}
+            </div>
           </div>
         </div>
       </div>

frontend/app/(main)/project/page.tsx

@@ -8,10 +8,8 @@ export const metadata: Metadata = {
 
 export default function ProjectPage() {
   return (
-    <div className="container mx-auto flex min-h-0 flex-1 flex-col px-4 pt-8 sm:px-6 lg:max-w-7xl lg:px-8">
-      <Suspense>
-        <ProjectMain />
-      </Suspense>
-    </div>
+    <Suspense>
+      <ProjectMain />
+    </Suspense>
   );
 }

frontend/app/(main)/receive/[projectId]/page.tsx

@@ -3,10 +3,8 @@ import {ReceiveMain} from '@/components/common/receive';
 
 export default function ProjectPage() {
   return (
-    <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      <Suspense>
-        <ReceiveMain />
-      </Suspense>
-    </div>
+    <Suspense>
+      <ReceiveMain />
+    </Suspense>
   );
 }

frontend/app/(main)/received/page.tsx

@@ -8,10 +8,8 @@ export const metadata: Metadata = {
 
 export default function ReceivedPage() {
   return (
-    <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      <Suspense>
-        <ReceivedMain />
-      </Suspense>
-    </div>
+    <Suspense>
+      <ReceivedMain />
+    </Suspense>
   );
 }

frontend/app/not-found.tsx

@@ -7,7 +7,7 @@ import Link from 'next/link';
 export default function NotFound() {
   return (
     <div className="fixed inset-0 flex items-center justify-center dark:bg-black bg-white">
-      <div className="max-w-7xl mx-auto text-center px-4">
+      <div className="mx-auto max-w-7xl px-4 text-center sm:px-6 md:px-8 lg:px-12">
         <motion.div
           initial={{opacity: 0, y: 20}}
           animate={{opacity: 1, y: 0}}
@@ -127,4 +127,3 @@ export default function NotFound() {
     </div>
   );
 }
-

frontend/components/animate-ui/radix/dialog.tsx

@@ -11,6 +11,7 @@ import {
 } from 'motion/react';
 
 import {cn} from '@/lib/utils';
+import {ScrollArea} from '@/components/ui/scroll-area';
 
 type DialogContextType = {
   isOpen: boolean;
@@ -151,7 +152,7 @@ function DialogContent({
               }}
               transition={{...transition, duration: 0.15, ease: 'easeOut'}}
               className={cn(
-                  'fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border border-border/60 bg-background/95 p-6 shadow-[0_24px_60px_rgba(15,23,42,0.12)] ring-1 ring-black/[0.03] dark:border-border/70 dark:bg-background dark:shadow-[0_24px_60px_rgba(0,0,0,0.45)] dark:ring-white/[0.04]',
+                  'fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-0 overflow-hidden rounded-[24px] border border-border/50 bg-background/95 shadow-[0_24px_60px_rgba(15,23,42,0.10)] ring-1 ring-black/[0.03] dark:border-border/70 dark:bg-background dark:shadow-[0_24px_60px_rgba(0,0,0,0.42)] dark:ring-white/[0.04]',
                   className,
               )}
               {...props}
@@ -178,7 +179,7 @@ function DialogHeader({className, ...props}: DialogHeaderProps) {
     <div
       data-slot="dialog-header"
       className={cn(
-          'flex flex-col space-y-1.5 text-center sm:text-left',
+          'flex flex-col gap-1.5 px-6 py-4 text-left bg-background',
           className,
       )}
       {...props}
@@ -193,14 +194,28 @@ function DialogFooter({className, ...props}: DialogFooterProps) {
     <div
       data-slot="dialog-footer"
       className={cn(
-          'flex flex-col-reverse sm:flex-row sm:justify-end gap-2',
+          'flex flex-row justify-end gap-2 px-6 py-4 bg-background',
           className,
       )}
       {...props}
     />
   );
 }
 
+type DialogBodyProps = React.ComponentProps<typeof ScrollArea>;
+
+function DialogBody({className, children, ...props}: DialogBodyProps) {
+  return (
+    <ScrollArea
+      data-slot="dialog-body"
+      className={cn('min-h-0 flex-1', className)}
+      {...props}
+    >
+      {children}
+    </ScrollArea>
+  );
+}
+
 type DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>;
 
 function DialogTitle({className, ...props}: DialogTitleProps) {
@@ -224,7 +239,7 @@ function DialogDescription({className, ...props}: DialogDescriptionProps) {
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn('text-sm text-muted-foreground', className)}
+      className={cn('text-xs text-muted-foreground pt-1', className)}
       {...props}
     />
   );
@@ -239,6 +254,7 @@ export {
   DialogContent,
   DialogHeader,
   DialogFooter,
+  DialogBody,
   DialogTitle,
   DialogDescription,
   useDialog,
@@ -251,6 +267,7 @@ export {
   type DialogContentProps,
   type DialogHeaderProps,
   type DialogFooterProps,
+  type DialogBodyProps,
   type DialogTitleProps,
   type DialogDescriptionProps,
 };