fix(ui): Anzeigefehler aus der Browser-Pruefung beheben

Erstmals mit echtem Browser nachgesehen (headless Chrome ueber Playwright,
Screenshots aller Ansichten). Dabei fuenf Dinge gefunden:

1. Menue klebte am Fensterrand statt am Ausloeser. Bei einem Ausloeser weit
   links wurde die bevorzugte rechtsbuendige Ausrichtung negativ und dann auf
   den Rand geklemmt - das Menue stand quer ueber der Seite. Jetzt wird bei
   Ueberlauf auf die andere Ausrichtung gewechselt und erst danach geklemmt.

2. .popover war mit 97 % nicht ganz deckend, wodurch "Bearbeiten" und
   "Loeschen" schwach durchschienen. Jetzt vollstaendig deckend.

3. Der Schieberegler zeichnete die Spur rechts vom Griff in einem hellen
   Standardton - ein grelles Band im dunklen Layout. Ersetzt durch eine
   selbst gezeichnete Variante mit Farbverlauf und sichtbarem Griff. Auf der
   Projektseite ersetzt sie zugleich das bisherige unsichtbare Eingabefeld
   ueber einem gezeichneten Balken, das gar keinen Griff hatte.

4. Der Hinweis der Kachel "Ideen" wurde mitten im Wort abgeschnitten
   ("Noch ein Gedanke - nichts ge..."). Kurzer Text statt der langen
   Statusbeschreibung.

5. Nach der Einrichtung stand im Adminbereich "noch nie angemeldet", obwohl
   gerade eine Sitzung lief. Einrichtung und Registrierung setzen lastLoginAt
   jetzt mit.

Die Konsole blieb ueber alle Ansichten hinweg frei von Fehlern und Warnungen
- die strikte CSP mit Nonce und strict-dynamic bricht also nichts.

Geprueft an einer separaten Wegwerf-Datenbank auf Port 3100, damit die
laufende Instanz unberuehrt blieb.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/components/ProjectDialog.tsx

@@ -287,7 +287,8 @@ export function ProjectDialog({ open, onClose, connections, project }: ProjectDi
               step={5}
               value={form.progress}
               onChange={(event) => update("progress", Number(event.target.value))}
-              className="w-full accent-violet-500"
+              className="range"
+              style={{ "--fill": `${form.progress}%` } as React.CSSProperties}
             />
           </div>
 

src/components/ProjectHeader.tsx

@@ -193,27 +193,22 @@ export function ProjectHeader({
           <span>Fortschritt</span>
           <span className="tabular-nums text-slate-300">{progress}%</span>
         </div>
-        <div className="relative">
-          <div className="h-2 w-full overflow-hidden rounded-full bg-white/6">
-            <div
-              className="accent-bar h-full rounded-full transition-[width] duration-300"
-              style={{ width: `${Math.max(1, progress)}%` }}
-            />
-          </div>
-          <input
-            type="range"
-            min={0}
-            max={100}
-            step={5}
-            value={progress}
-            onChange={(event) => setProgress(Number(event.target.value))}
-            onMouseUp={() => patch({ progress })}
-            onTouchEnd={() => patch({ progress })}
-            onKeyUp={() => patch({ progress })}
-            aria-label="Fortschritt anpassen"
-            className="absolute inset-0 h-2 w-full cursor-pointer opacity-0"
-          />
-        </div>
+        {/* Eigener Regler statt eines unsichtbaren Eingabefelds ueber einem
+            gezeichneten Balken: so gibt es einen sichtbaren Griff. */}
+        <input
+          type="range"
+          min={0}
+          max={100}
+          step={5}
+          value={progress}
+          onChange={(event) => setProgress(Number(event.target.value))}
+          onMouseUp={() => patch({ progress })}
+          onTouchEnd={() => patch({ progress })}
+          onKeyUp={() => patch({ progress })}
+          aria-label="Fortschritt anpassen"
+          className="range"
+          style={{ "--fill": `${progress}%` } as React.CSSProperties}
+        />
       </div>
 
       <ProjectDialog

src/components/ui/Popover.tsx

@@ -56,7 +56,13 @@ export function Popover({
     const margin = 8;
     const gap = 6;
 
+    // Bevorzugte Ausrichtung, bei Ueberlauf auf die andere Seite wechseln.
+    // Nur Festklemmen am Fensterrand waere schlecht: bei einem Ausloeser weit
+    // links stuende das Menue sonst quer ueber der Seite statt an seinem
+    // Ausloeser.
     let left = align === "end" ? rect.right - width : rect.left;
+    if (left < margin) left = rect.left;
+    if (left + width > window.innerWidth - margin) left = rect.right - width;
     left = Math.min(Math.max(margin, left), window.innerWidth - width - margin);
 
     const panelHeight = panelRef.current?.offsetHeight ?? 0;