fix some bug design

src/app/[name]/(Dialogs)/layout.tsx

@@ -1,12 +1,22 @@
 'use client';
 
 import ClientSideWrapper from '@/components/wrapper/ClientSideWrapper';
-import React from 'react'
+import React from 'react';
+import { usePathname } from 'next/navigation';
+import clsx from 'clsx';
 
 function DialogsLayout({ children }: { children: React.ReactNode }) {
+    const pathname = usePathname();
+    const isCheckoutPage = pathname?.includes('/checkout/');
+
     return (
         <ClientSideWrapper>
-            <main className='h-full w-full overflow-y-auto noscrollbar bg-container lg:bg-background pt-4 pb-6 px-6'>
+            <main className={clsx(
+                'h-full w-full overflow-y-auto noscrollbar pt-4 pb-6 px-6',
+                isCheckoutPage
+                    ? 'bg-background dark:bg-background'
+                    : 'bg-container lg:bg-background'
+            )}>
                 {children}
             </main>
         </ClientSideWrapper>

src/app/[name]/(Main)/[id]/page.tsx

@@ -192,8 +192,8 @@ function FoodPage({ }: Props) {
                 </div>
 
                 <div className="mt-4 text-xs">
-                    <p>محتویات:</p>
-                    <p>{content || '-'}</p>
+                    <p className='font-bold'>محتویات:</p>
+                    <p className='mt-2 leading-6'>{content || '-'}</p>
                 </div>
 
                 <div className='mt-12 flex justify-between items-center'>