web: tab strip reveals the active tab horizontally only (page no longer opens scrolled on mobile)
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
1 changed file +6 −1
modified
apps/web/src/components/ui/tabs.tsx
+6 −1
@@ -31,7 +31,12 @@ export function Tabs({ tabs, defaultTab, children, param = 'tab', className, sti | |||||
| 31 | }; | 31 | }; | ||
| 32 | 32 | ||||
| 33 | useEffect(() => { | 33 | useEffect(() => { | ||
| 34 | − stripRef.current?.querySelector<HTMLElement>(`[data-tab="${active}"]`)?.scrollIntoView({ block: 'nearest', inline: 'nearest' }); | 34 | + // Horizontal reveal of the active tab only — never scrollIntoView (it scrolls the page vertically on load, spec: pages open at the top). | ||
| 35 | + const strip = stripRef.current; | ||||
| 36 | + const el = strip?.querySelector<HTMLElement>(`[data-tab="${active}"]`); | ||||
| 37 | + if (!strip || !el) return; | ||||
| 38 | + const left = el.offsetLeft - (strip.clientWidth - el.offsetWidth) / 2; | ||||
| 39 | + if (Math.abs(strip.scrollLeft - left) > 4) strip.scrollTo({ left: Math.max(0, left) }); | ||||
| 35 | }, [active]); | 40 | }, [active]); | ||
| 36 | 41 | ||||
| 37 | const onKey = (e: React.KeyboardEvent) => { | 42 | const onKey = (e: React.KeyboardEvent) => { | ||
| 38 | 43 | ||||