From bea91d9beb2d328ac6e3444c920c934ef9121220 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 6 Oct 2026 10:36:33 +0000 Subject: [PATCH] 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 --- src/components/ui/Tabs.jsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/components/ui/Tabs.jsx b/src/components/ui/Tabs.jsx index ead80bf..e282f52 100644 --- a/src/components/ui/Tabs.jsx +++ b/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 ( -
+
{tabs.map((t) => (