Digitale Eingäge Modal style

components/main/einausgaenge/modals/InputModal.tsx

@@ -137,12 +137,14 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
             />
           </div>
 
-          <div className="flex items-center gap-2 col-span-2">
+          <div>
             <strong>Invertierung:</strong>
+          </div>
+          <div className="flex justify-between items-center gap-2">
             <span>{invertiert ? "Ein" : "Aus"}</span>
             <button
               onClick={() => setInvertiert(!invertiert)}
-              className="ml-auto px-3 py-1 text-sm bg-gray-200 hover:bg-gray-300 rounded"
+              className="px-3 py-1 text-sm bg-gray-200 hover:bg-gray-300 rounded"
             >
               Umschalten
             </button>
@@ -156,30 +158,49 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
           <div>
             <strong>Filterzeit:</strong>
           </div>
-          <div>
+          <div className="relative">
             <input
               type="number"
               min={0}
               max={2000}
               value={filterzeit}
-              onChange={(e) => setFilterzeit(Number(e.target.value))}
-              className="border border-gray-300 rounded px-2 py-1 w-full"
-            />{" "}
-            ms
+              onChange={(e) => {
+                const val = Number(e.target.value);
+                if (val <= 2000) {
+                  setFilterzeit(val);
+                }
+              }}
+              className="border border-gray-300 rounded px-2 py-1 pr-10 w-full"
+              title="Maximal 2000 ms erlaubt"
+            />
+            <span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
+              ms
+            </span>
           </div>
 
           <div>
             <strong>Gewichtung:</strong>
           </div>
-          <div>
+          <div className="relative">
             <input
               type="number"
               min={0}
               max={1000}
               value={gewichtung}
-              onChange={(e) => setGewichtung(Number(e.target.value))}
+              onChange={(e) => {
+                const val = Number(e.target.value);
+                if (val <= 1000) {
+                  setGewichtung(val);
+                }
+              }}
               className="border border-gray-300 rounded px-2 py-1 w-full"
+              title="Maximal 1000 erlaubt"
             />
+            {gewichtung > 1000 && (
+              <div className="text-sm text-red-600 mt-1">
+                Maximalwert 1000 überschritten!
+              </div>
+            )}
           </div>
 
           <div>