Make Panel scrollable and on-top of map to prevent rerendering of map

apps/dispatch/app/dispatch/page.tsx

@@ -2,7 +2,6 @@
 
 import { OpenButton } from "dispatch/_components/pannel/OpenButton";
 import { Pannel } from "dispatch/_components/pannel/Pannel";
-import MapToastCard2 from "dispatch/_components/toast/ToastCard";
 import { usePannelStore } from "_store/pannelStore";
 import { cn } from "helpers/cn";
 import dynamic from "next/dynamic";
@@ -11,19 +10,20 @@ const Map = dynamic(() => import("./_components/map/Map"), { ssr: false });
 export default () => {
 	const { isOpen } = usePannelStore();
 	return (
-		<div
-			className={cn(
-				"relative flex-1 flex transition-all duration-500 ease",
-				!isOpen && "w-[calc(100%+400px)]",
-				isOpen && "w-[100%]",
-			)}
-		>
+		<div className="relative flex-1 flex transition-all duration-500 ease w-full">
 			{/* <MapToastCard2 /> */}
-			<div className="flex-1 relative flex">
+			<div className="flex flex-1 relative">
 				<OpenButton />
 				<Map />
 			</div>
-			<Pannel />
+			<div
+				className={cn(
+					"absolute right-0 w-[500px] z-999 transition-transform",
+					isOpen ? "translate-x-0" : "translate-x-full",
+				)}
+			>
+				<Pannel />
+			</div>
 		</div>
 	);
 };