design fix

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

@@ -129,15 +129,14 @@ function FoodPage({}: Props) {
   };
 
   return (
-    <div className="lg:absolute lg:top-1/2 not-lg:max-w-lg not-lg:place-self-center lg:-translate-y-1/2 xl:right-[285px] lg:left-5 lg:right-4 lg:bottom-4 not-lg:w-full not-md:-translate-y-2 pt-6 flex flex-col lg:grid grid-cols-2 bottom-10">
-      <div className="relative w-full h-full not-lg:bg-container rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1">
+    <div className="not-lg:max-w-lg not-lg:place-self-center not-lg:w-full not-lg:mb-10 pt-6 not-lg:flex not-lg:flex-col lg:fixed lg:z-10 lg:top-20 xl:top-[5.5rem] lg:bottom-24 lg:left-5 lg:right-4 xl:right-[285px] lg:grid lg:grid-cols-2 lg:min-h-0 lg:overflow-hidden lg:rounded-2xl">
+      <div className="relative w-full  lg:h-full min-h-0 not-lg:bg-container rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1">
         <Image
-          className="w-full object-cover bg-[#F2F2F9] h-full"
+          className="lg:object-contain  h-auto object-cover bg-[#F2F2F9]"
           src={foodImage}
           alt={foodName}
+          width={1000}
           height={100}
-          width={100}
-          unoptimized
           priority
         />
         <div className="absolute top-4 left-0 pe-5.5 ps-7 w-full inline-flex justify-between items-center">
@@ -156,7 +155,7 @@ function FoodPage({}: Props) {
         </div>
       </div>
 
-      <div className="relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:justify-center bg-container w-full rounded-3xl overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none">
+      <div className="relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:justify-center lg:h-full lg:min-h-0 bg-container w-full rounded-3xl overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none lg:overflow-y-auto">
         <div className="w-full inline-flex justify-between items-center">
           <h5 className="text-base font-bold">{foodName}</h5>
           <button

src/components/wrapper/ClientMenuRouteWrapper.tsx

@@ -80,7 +80,7 @@ function ClientMenuRouteWrapper({ children }: Props) {
 
 
       <main
-        className="noscrollbar overflow-y-auto h-svh pt-6 xl:pt-8 pb-12 px-4 xl:pr-0 xl:pl-5 w-full xl:w-[calc(100%-285px)] md:self-end"
+        className="relative noscrollbar overflow-y-auto h-svh pt-6 xl:pt-8 pb-12 px-4 xl:pr-0 xl:pl-5 w-full xl:w-[calc(100%-285px)] md:self-end"
       >
         {children}
       </main>