Fixes for #46

apps/dispatch/app/_components/left/Chat.tsx

@@ -70,7 +70,14 @@ export const Chat = () => {
 					tabIndex={0}
 					className="dropdown-content card bg-base-200 w-150 shadow-md z-[1100] max-h-[400px] ml-2 border-1 border-primary"
 				>
-					<div className="card-body overflow-y-auto">
+					<div className="card-body relative">
+						<button
+							className="absolute top-2 right-2 btn btn-xs btn-circle btn-ghost"
+							onClick={() => setChatOpen(false)}
+							type="button"
+						>
+							<span className="text-xl leading-none">&times;</span>
+						</button>
 						<h2 className="inline-flex items-center gap-2 text-lg font-bold mb-2">
 							<ChatBubbleIcon /> Chat
 						</h2>

apps/dispatch/app/_components/left/Report.tsx

@@ -58,6 +58,13 @@ export const Report = () => {
 					className="dropdown-content card bg-base-200 w-150 shadow-md z-[1100] ml-2 border-1 border-error"
 				>
 					<div className="card-body">
+						<button
+							className="absolute top-2 right-2 btn btn-xs btn-circle btn-ghost"
+							onClick={() => setReportTabOpen(false)}
+							type="button"
+						>
+							<span className="text-xl leading-none">&times;</span>
+						</button>
 						<h2 className="inline-flex items-center gap-2 text-lg font-bold mb-2">
 							<ExclamationTriangleIcon /> Report senden
 						</h2>

apps/hub/app/(app)/_components/Stats.tsx

@@ -86,8 +86,8 @@ export const PilotStats = async () => {
 	const totalFlownMissionsPercent = ((ownRankMissionsFlown * 100) / totalUserCount).toFixed(0);
 
 	return (
-		<div className="stats shadow">
-			<div className="stat">
+		<div className="stats shadow flex flex-row items-stretch">
+			<div className="stat flex-1 min-w-0">
 				<div className="stat-figure text-primary">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -111,7 +111,7 @@ export const PilotStats = async () => {
 				</div>
 			</div>
 
-			<div className="stat">
+			<div className="stat flex-1 min-w-0">
 				<div className="stat-figure text-secondary">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -134,7 +134,7 @@ export const PilotStats = async () => {
 			</div>
 
 			{mostFlownStation && (
-				<div className="stat">
+				<div className="stat w-full">
 					<div className="stat-figure text-info">
 						<PlaneIcon className="w-8 h-8" />
 					</div>
@@ -217,8 +217,8 @@ export const DispoStats = async () => {
 	const minutes = Math.floor((totalDispoTime % (1000 * 60 * 60)) / (1000 * 60));
 
 	return (
-		<div className="stats shadow">
-			<div className="stat">
+		<div className="stats shadow flex flex-row items-stretch">
+			<div className="stat flex-1 min-w-0">
 				<div className="stat-figure text-primary">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -238,7 +238,7 @@ export const DispoStats = async () => {
 				<div className="stat-value text-primary">{totalDispatchedMissions}</div>
 			</div>
 
-			<div className="stat">
+			<div className="stat flex-1 min-w-0">
 				<div className="stat-figure text-secondary">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"

apps/hub/app/(auth)/layout.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import Image from "next/image";
+
 const AuthLayout = ({ children }: { children: React.ReactNode }) => (
 	<div
 		className="hero min-h-screen"
@@ -10,6 +12,15 @@ const AuthLayout = ({ children }: { children: React.ReactNode }) => (
 		<div className="hero-overlay bg-neutral/60"></div>
 		<div className="hero-content text-center ">
 			<div className="max-w-lg">
+				{/* Logo above the card */}
+				<Image
+					src="/mail/var_logo.png"
+					alt="VAR Logo"
+					width={128}
+					height={128}
+					className="mx-auto mb-6 w-40 h-auto"
+					priority
+				/>
 				<div className="card rounded-2xl bg-base-100 w-full min-w-[500px] shadow-2xl max-md:min-w-[400px]">
 					{children}
 				</div>

apps/hub/app/_components/Nav.tsx

@@ -11,6 +11,7 @@ import Link from "next/link";
 import { WarningAlert } from "./ui/PageAlert";
 import { getServerSession } from "api/auth/[...nextauth]/auth";
 import { Error } from "./Error";
+import Image from "next/image";
 
 export const VerticalNav = async () => {
 	const session = await getServerSession();
@@ -103,7 +104,17 @@ export const VerticalNav = async () => {
 export const HorizontalNav = () => (
 	<div className="navbar bg-base-200 shadow-md rounded-lg mb-4">
 		<div className="flex items-center">
-			<a className="btn btn-ghost normal-case text-xl">Virtual Air Rescue - HUB</a>
+			<Link href="/" className="flex items-center">
+				<Image
+					src="/mail/var_logo.png"
+					alt="VAR Logo"
+					width={40}
+					height={40}
+					className="ml-2 mr-3"
+					priority
+				/>
+				<h2 className="normal-case text-xl font-semibold">Virtual Air Rescue - HUB</h2>
+			</Link>
 			<WarningAlert />
 		</div>
 		<div className="flex items-center ml-auto">