Dispatch Router-Struktur; AddPenalty Layout gefixed

packages/shared-components/components/PenaltyDropdown.tsx

@@ -7,11 +7,13 @@ export const PenaltyDropdown = ({
 	btnClassName,
 	showDatePicker,
 	btnTip,
+	btnName,
 	Icon,
 }: {
 	onClick: (data: { reason: string; until: Date | null }) => void;
 	showDatePicker?: boolean;
 	btnClassName?: string;
+	btnName: string;
 	btnTip?: string;
 	Icon: ReactNode;
 }) => {
@@ -20,22 +22,26 @@ export const PenaltyDropdown = ({
 	return (
 		<details className="dropdown dropdown-left dropdown-center">
 			<summary className={cn("btn btn-xs btn-square btn-soft", btnClassName)}>{Icon}</summary>
-			<div className="dropdown-content flex gap-3 items-center bg-base-100 rounded-box z-1 p-2 mr-3 shadow-sm">
-				<input
+			<div
+				className="dropdown-content bg-base-100 rounded-box z-1 p-4 shadow-sm space-y-4 shadow-md"
+				style={{ minWidth: "500px", right: "40px" }}
+			>
+				<h2 className="text-xl font-blod text-center">{btnName}</h2>
+				<textarea
 					value={reason}
 					onChange={(e) => setReason(e.target.value)}
-					type="text"
-					className="input min-w-[250px]"
+					className="input w-full"
 					placeholder="Begründung"
+					style={{ minHeight: "100px" }}
 				/>
 				{showDatePicker && (
 					<select
-						className="select min-w-[150px] select-bordered"
+						className="select w-full select-bordered"
 						value={until}
 						onChange={(e) => setUntil(e.target.value)}
 					>
 						<option value="default" disabled>
-							Unbegrenzt
+							Keine
 						</option>
 						<option value="1h">1 Stunde</option>
 						<option value="6h">6 Stunden</option>
@@ -51,7 +57,7 @@ export const PenaltyDropdown = ({
 					</select>
 				)}
 				<button
-					className={cn("btn btn-square btn-soft tooltip tooltip-bottom", btnClassName)}
+					className={cn("btn w-full btn-square btn-soft tooltip tooltip-bottom", btnClassName)}
 					data-tip={btnTip}
 					onClick={() => {
 						let untilDate: Date | null = null;
@@ -98,7 +104,7 @@ export const PenaltyDropdown = ({
 						onClick({ reason, until: untilDate });
 					}}
 				>
-					{Icon}
+					{Icon} {btnName}
 				</button>
 			</div>
 		</details>