Reiterleiste scrollt den aktiven Reiter in den sichtbaren Bereich (Deep-Links am Handy)

Tabs fuehrt die Leiste nach dem Laden und bei jedem Reiterwechsel waagerecht nach, wenn der aktive Reiter nicht ganz sichtbar ist (zentriert, nur die
Leiste scrollt, nicht die Seite). Betrifft alle Seiten mit Tabs; bei 390 px sah man auf der Kundenseite mit ?tab=protokoll, abo oder gutschriften
keinen aktiven Reiter.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/ui/Tabs.jsx

@@ -1,6 +1,23 @@
+import { useEffect, useRef } from 'react'
+
 export default function Tabs({ tabs, active, onChange }) {
+  const listRef = useRef(null)
+
+  // Der aktive Reiter gehoert in den sichtbaren Teil der Leiste (Deep-Links ?tab=..., am Handy sind es mehr Reiter als Platz).
+  // Nur die Leiste scrollt, waagerecht und nur wenn noetig; die Seite selbst bewegt sich nicht (anders als bei scrollIntoView).
+  useEffect(() => {
+    const list = listRef.current
+    const tab = list?.querySelector('[role="tab"][aria-selected="true"]')
+    if (!list || !tab) return
+    const l = list.getBoundingClientRect()
+    const t = tab.getBoundingClientRect()
+    if (t.left < l.left || t.right > l.right) {
+      list.scrollLeft += (t.left + t.right) / 2 - (l.left + l.right) / 2
+    }
+  }, [active, tabs.length])
+
   return (
-    <div className="tabs" role="tablist">
+    <div className="tabs" role="tablist" ref={listRef}>
       {tabs.map((t) => (
         <button
           key={t.id}