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

apps/dispatch/app/dispatch/_components/pannel/MissionForm.tsx

@@ -170,9 +170,11 @@ export const MissionForm: React.FC = () => {
 				/>
 			</div>
 
-			<button type="submit" className="btn btn-primary mt-4">
-				Alarmieren
-			</button>
+			<div className="min-h-[140px]">
+				<button type="submit" className="btn btn-primary mt-4">
+					Alarmieren
+				</button>
+			</div>
 		</form>
 	);
 };

apps/dispatch/app/dispatch/_components/pannel/Missions.tsx

@@ -1,34 +0,0 @@
-import { useMissionsStore } from "_store/missionsStore";
-
-export const Missions = () => {
-	const { missions } = useMissionsStore();
-
-	return (
-		<div>
-			<table className="table table-xs">
-				<thead>
-					<tr>
-						<th>ID</th>
-						<th>Einsatzmittel</th>
-						<th>Ort</th>
-						<th></th>
-					</tr>
-				</thead>
-				<tbody>
-					{missions.map((mission) => (
-						<tr key={mission.id}>
-							<td>{mission.id}</td>
-							<td>{mission.missionCategory}</td>
-							<td>
-								{mission.addressStreet}, {mission.addressCity}
-							</td>
-							<td>
-								<button className="btn btn-sm">Details</button>
-							</td>
-						</tr>
-					))}
-				</tbody>
-			</table>
-		</div>
-	);
-};

apps/dispatch/app/dispatch/_components/pannel/OpenButton.tsx

@@ -14,7 +14,7 @@ export const OpenButton = () => {
 				isOpen && "transform translate-x-full",
 			)}
 		>
-			Open
+			Neuer Einsatz
 		</button>
 	);
 };

apps/dispatch/app/dispatch/_components/pannel/Pannel.tsx

@@ -1,20 +1,19 @@
 import { usePannelStore } from "_store/pannelStore";
 import { cn } from "helpers/cn";
 import { MissionForm } from "./MissionForm";
-import { Trash2 } from "lucide-react";
 
 export const Pannel = () => {
 	const { isOpen, setOpen } = usePannelStore();
 	return (
 		<div className={cn("flex-1 max-w-[600px] z-9999999")}>
-			<div className="bg-base-100 h-full w-full">
+			<div className="bg-base-100 min-h-screen h-full max-h-screen w-full overflow-auto">
 				<div className="flex flex-row justify-between items-center p-4">
 					<h1 className="text-xl font-bold">Neuer Einsatz</h1>
 					<button className="btn" onClick={() => setOpen(false)}>
 						Schließen
 					</button>
 				</div>
-				<div className="divider" />
+				<div className="divider m-0" />
 				<div className="p-4">
 					<MissionForm />
 				</div>

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>
 	);
 };