fix: Dropdown bleibt beim Scrollen offen, Dialog beim Markieren

Zwei Klick-Aergernisse mit derselben Ursache – ein zu grob gefasster
Schliess-Ausloeser.

Die Kategorieliste schloss bei jedem Scroll-Ereignis, wegen capture=true
auch beim Scrollen IN der Liste. Genau das will man aber tun. Jetzt zaehlt
nur noch Scrollen ausserhalb.

Der Dialog schloss, sobald ein Klick auf dem Hintergrund endete. Markiert
man Text in einem Feld und zieht ueber den Rand hinaus, liegt das Mouseup
dort – der Dialog ging mitten im Markieren zu. Jetzt muss der Klick auch
auf dem Hintergrund begonnen haben.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/components/CategorySelect.jsx

@@ -75,7 +75,13 @@ export default function CategorySelect({
       setOpen(false);
     };
     const onKey = (e) => e.key === "Escape" && setOpen(false);
-    const onScrollResize = () => setOpen(false);
+    // Beim Scrollen der Seite wandert die Liste weg vom Knopf, deshalb zu.
+    // Scrollen INNERHALB der Liste ist aber genau das, was man tun will –
+    // capture=true fing das bisher mit ab und schloss sie sofort wieder.
+    const onScrollResize = (e) => {
+      if (e?.target && panelRef.current?.contains(e.target)) return;
+      setOpen(false);
+    };
     document.addEventListener("mousedown", onDown);
     document.addEventListener("keydown", onKey);
     // capture=true: fängt auch das Scrollen innerhalb der Tabelle ab.

web/src/components/Modal.jsx

@@ -1,11 +1,22 @@
+import { useRef } from "react";
+
 import Icon from "./Icon";
 
 // Einfacher, gestalteter Dialog (nutzt die modal-Klassen der Vorlage).
 export default function Modal({ title, onClose, children, footer, wide = false }) {
+  // Nur schliessen, wenn der Klick auch AUF dem Hintergrund begonnen hat.
+  // Markiert man Text in einem Feld und zieht dabei über den Rand hinaus,
+  // liegt das Mouseup auf dem Hintergrund; der Klick feuert dann auf dem
+  // gemeinsamen Elternelement und schloss den Dialog mitten im Markieren.
+  const startAussen = useRef(false);
   return (
     <div
       className="modal-backdrop"
-      onClick={(e) => e.target === e.currentTarget && onClose()}
+      onMouseDown={(e) => { startAussen.current = e.target === e.currentTarget; }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget && startAussen.current) onClose();
+        startAussen.current = false;
+      }}
     >
       <div className="modal" role="dialog" aria-modal="true" style={{ maxWidth: wide ? 640 : 480 }}>
         <div className="modal-head">