From f9ce9a9e7a0e03157408843ac14844e63641ee34 Mon Sep 17 00:00:00 2001
From: Nicolas <nicolas@syntaxdev.de>
Date: Wed, 30 Apr 2025 09:12:30 +0200
Subject: [PATCH] min height for popup content

---
 .../_components/map/AircraftMarker.tsx        |  4 +-
 .../_components/map/MissionMarkers.tsx        |  2 +-
 .../map/_components/AircraftMarkerTabs.tsx    |  4 +-
 .../map/_components/MissionMarkerTabs.tsx     | 87 ++++++++++---------
 4 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx b/apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx
index 2696ba4c..7e2e3e1d 100644
--- a/apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx
+++ b/apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx
@@ -218,7 +218,9 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
 					</div>
 				</div>
 			</div>
-			<div>{renderTabContent}</div>
+			<div className="h-full min-h-[140px]">
+				<div className="flex-grow">{renderTabContent}</div>
+			</div>
 		</>
 	);
 };
diff --git a/apps/dispatch/app/dispatch/_components/map/MissionMarkers.tsx b/apps/dispatch/app/dispatch/_components/map/MissionMarkers.tsx
index d90e7427..4c3f35bc 100644
--- a/apps/dispatch/app/dispatch/_components/map/MissionMarkers.tsx
+++ b/apps/dispatch/app/dispatch/_components/map/MissionMarkers.tsx
@@ -211,7 +211,7 @@ const MissionPopupContent = ({ mission }: { mission: Mission }) => {
 					</div>
 				</div>
 			</div>
-			<div>{renderTabContent}</div>
+			<div className="h-full min-h-[200px]">{renderTabContent}</div>
 		</>
 	);
 };
diff --git a/apps/dispatch/app/dispatch/_components/map/_components/AircraftMarkerTabs.tsx b/apps/dispatch/app/dispatch/_components/map/_components/AircraftMarkerTabs.tsx
index 8ba1f2f8..22abf471 100644
--- a/apps/dispatch/app/dispatch/_components/map/_components/AircraftMarkerTabs.tsx
+++ b/apps/dispatch/app/dispatch/_components/map/_components/AircraftMarkerTabs.tsx
@@ -37,13 +37,13 @@ const FMSStatusSelector = ({ aircraft }: { aircraft: Aircraft }) => {
 	const [hoveredStatus, setHoveredStatus] = useState<string | null>(null);
 
 	return (
-		<div className="flex gap-2 p-4 justify-center">
+		<div className="flex gap-2 p-4 justify-center items-center min-h-[136px] h-full">
 			{Array.from({ length: 9 }, (_, i) => (i + 1).toString())
 				.filter((status) => status !== "5") // Exclude status 5
 				.map((status) => (
 					<div
 						key={status}
-						className="flex justify-center items-center min-w-11 min-h-11 cursor-pointer text-3xl font-bold"
+						className="flex justify-center items-center min-w-13 min-h-13 cursor-pointer text-4xl font-bold"
 						style={{
 							backgroundColor:
 								hoveredStatus === status
diff --git a/apps/dispatch/app/dispatch/_components/map/_components/MissionMarkerTabs.tsx b/apps/dispatch/app/dispatch/_components/map/_components/MissionMarkerTabs.tsx
index e5bb7e25..2eb4da52 100644
--- a/apps/dispatch/app/dispatch/_components/map/_components/MissionMarkerTabs.tsx
+++ b/apps/dispatch/app/dispatch/_components/map/_components/MissionMarkerTabs.tsx
@@ -245,48 +245,53 @@ const FMSStatusHistory = ({ mission }: { mission: Mission }) => {
 			</div>
 			<div className="divider m-0" />
 			<ul className="space-y-2 max-h-[300px] overflow-y-auto overflow-x-auto">
-				{(mission.missionLog as unknown as MissionLog[]).map((entry, index) => {
-					if (entry.type === "station-log")
-						return (
-							<li key={index} className="flex items-center gap-2">
-								<span className="text-base-content">{entry.timeStamp}</span>
-								<span
-									className="font-bold text-base"
-									style={{
-										color: FMS_STATUS_TEXT_COLORS[entry.data.newFMSstatus],
-									}}
-								>
-									{entry.data.newFMSstatus}
-								</span>
-								<span className="text-base-content">
-									{entry.data.station.bosCallsign}
-								</span>
-							</li>
-						);
-					if (entry.type === "message-log")
-						return (
-							<li key={index} className="flex items-center gap-2">
-								<span className="text-base-content">
-									{new Date(entry.timeStamp).toLocaleTimeString([], {
-										hour: "2-digit",
-										minute: "2-digit",
-									})}
-								</span>
-								<span
-									className="font-bold text-base"
-									style={{
-										color: FMS_STATUS_TEXT_COLORS[6],
-									}}
-								>
-									{entry.data.user.firstname?.[0]?.toUpperCase() ?? "?"}
-									{entry.data.user.lastname?.[0]?.toUpperCase() ?? "?"}
-								</span>
-								<span className="text-base-content">{entry.data.message}</span>
-							</li>
-						);
+				{(mission.missionLog as unknown as MissionLog[])
+					.slice()
+					.reverse()
+					.map((entry, index) => {
+						if (entry.type === "station-log")
+							return (
+								<li key={index} className="flex items-center gap-2">
+									<span className="text-base-content">{entry.timeStamp}</span>
+									<span
+										className="font-bold text-base"
+										style={{
+											color: FMS_STATUS_TEXT_COLORS[entry.data.newFMSstatus],
+										}}
+									>
+										{entry.data.newFMSstatus}
+									</span>
+									<span className="text-base-content">
+										{entry.data.station.bosCallsign}
+									</span>
+								</li>
+							);
+						if (entry.type === "message-log")
+							return (
+								<li key={index} className="flex items-center gap-2">
+									<span className="text-base-content">
+										{new Date(entry.timeStamp).toLocaleTimeString([], {
+											hour: "2-digit",
+											minute: "2-digit",
+										})}
+									</span>
+									<span
+										className="font-bold text-base"
+										style={{
+											color: FMS_STATUS_TEXT_COLORS[6],
+										}}
+									>
+										{entry.data.user.firstname?.[0]?.toUpperCase() ?? "?"}
+										{entry.data.user.lastname?.[0]?.toUpperCase() ?? "?"}
+									</span>
+									<span className="text-base-content">
+										{entry.data.message}
+									</span>
+								</li>
+							);
 
-					return null;
-				})}
+						return null;
+					})}
 			</ul>
 		</div>
 	);