From 30e6279cb2ca65eb7fec3c6e20dfe01a3c07a476 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Mon, 29 Jun 2026 16:04:37 +0330
Subject: [PATCH] better parralex

---
 src/app/[name]/(Main)/[id]/page.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/app/[name]/(Main)/[id]/page.tsx b/src/app/[name]/(Main)/[id]/page.tsx
index 0c9225d..4da8dd4 100644
--- a/src/app/[name]/(Main)/[id]/page.tsx
+++ b/src/app/[name]/(Main)/[id]/page.tsx
@@ -26,9 +26,7 @@ function FoodPage({}: Props) {
   const { items, addToCart, removeFromCart } = useCart();
   const [isFavorite, setIsFavorite] = useState<boolean>(false);
   const { mutate: toggleFavorite } = useToggleFavorite();
-  const pageRef = useRef<HTMLDivElement>(null);
   const imageRef = useRef<HTMLImageElement>(null);
-
   const foodId = food?.data?.id || (id as string);
   const quantity = useMemo(() => {
     const item = items?.[foodId];
@@ -83,7 +81,7 @@ function FoodPage({}: Props) {
   }, [food?.data?.isFavorite]);
 
   useEffect(() => {
-    const scrollEl = pageRef.current?.closest("main");
+    const scrollEl = document.querySelector("main");
     const imageEl = imageRef.current;
     if (!scrollEl || !imageEl) return;
 
@@ -160,13 +158,10 @@ function FoodPage({}: Props) {
   };
 
   return (
-    <div
-      ref={pageRef}
-      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-22 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="not-lg:max-w-lg not-lg:place-self-center not-lg:w-full not-lg:mb-10 lg:pt-6 not-lg:flex not-lg:flex-col lg:fixed lg:z-10 lg:top-20 xl:top-22 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={glassSurface(
-          "relative w-full lg:h-full min-h-0 rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1 lg:bg-transparent! lg:border-0! lg:shadow-none! lg:[backdrop-filter:none] not-lg:sticky not-lg:top-0 not-lg:z-0 not-lg:h-[min(50vh,400px)] not-lg:min-h-[280px] not-lg:rounded-b-none",
+          "relative w-full lg:h-full min-h-0 rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1 lg:bg-transparent! lg:border-0! lg:shadow-none! lg:[backdrop-filter:none] not-lg:sticky not-lg:top-6 not-lg:z-0 not-lg:h-[min(50vh,400px)] not-lg:min-h-[280px] not-lg:rounded-b-none",
         )}
       >
         {/* eslint-disable-next-line @next/next/no-img-element */}