LoopChartActionBar verhält sich jetzt wie im ISO-Modal: Bei Auswahl „Meldungen“

components/common/DateRangePicker.tsx

@@ -6,7 +6,15 @@ import { RootState } from "@/redux/store";
 import { setVonDatum, setBisDatum } from "@/redux/slices/dateRangePickerSlice";
 import "react-datepicker/dist/react-datepicker.css";
 
-const DateRangePicker: React.FC = () => {
+interface DateRangePickerProps {
+  compact?: boolean; // reduziert horizontale Breite
+  className?: string;
+}
+
+const DateRangePicker: React.FC<DateRangePickerProps> = ({
+  compact = false,
+  className = "",
+}) => {
   const dispatch = useDispatch();
 
   const reduxVonDatum = useSelector(
@@ -38,10 +46,22 @@ const DateRangePicker: React.FC = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, reduxVonDatum, reduxBisDatum]);
 
+  const gapClass = compact ? "space-x-2" : "space-x-4";
+  const labelWidthClass = compact ? "w-6" : "w-auto";
+  const inputWidthClass = compact ? "w-32" : "w-44"; // ca. 128px vs 176px
+
   return (
-    <div className="flex space-x-4 items-center">
-      <div className="flex items-center space-x-2">
-        <label className="block text-sm font-semibold">Von</label>
+    <div className={`flex ${gapClass} items-center ${className}`}>
+      <div
+        className={`flex items-center space-x-1 ${compact ? "text-xs" : ""}`}
+      >
+        <label
+          className={`block font-semibold ${
+            compact ? "text-xs" : "text-sm"
+          } ${labelWidthClass}`}
+        >
+          Von
+        </label>
         <DatePicker
           selected={reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo}
           onChange={(date) => {
@@ -57,12 +77,21 @@ const DateRangePicker: React.FC = () => {
           minDate={sixMonthsAgo}
           maxDate={today}
           dateFormat="dd.MM.yyyy"
-          className="border px-2 py-1 rounded"
+          className={`border px-2 py-1 rounded ${inputWidthClass} ${
+            compact ? "text-xs" : "text-sm"
+          }`}
         />
       </div>
-
-      <div className="flex items-center space-x-2">
-        <label className="block text-sm font-semibold">Bis</label>
+      <div
+        className={`flex items-center space-x-1 ${compact ? "text-xs" : ""}`}
+      >
+        <label
+          className={`block font-semibold ${
+            compact ? "text-xs" : "text-sm"
+          } ${labelWidthClass}`}
+        >
+          Bis
+        </label>
         <DatePicker
           selected={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
           onChange={(date) => {
@@ -78,7 +107,9 @@ const DateRangePicker: React.FC = () => {
           minDate={sixMonthsAgo}
           maxDate={today}
           dateFormat="dd.MM.yyyy"
-          className="border px-2 py-1 rounded"
+          className={`border px-2 py-1 rounded ${inputWidthClass} ${
+            compact ? "text-xs" : "text-sm"
+          }`}
         />
       </div>
     </div>