frontend: scroll to top of main content container on view change

najdek · najdek · commit 75b20ceff4c1 · 2026-06-02T00:30:08.000+02:00
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import {
   Settings,
   CloudDownload,
@@ -36,6 +36,15 @@ import LogViewer from './components/views/LogViewer'
 
 function App() {
   const [view, setView] = useState('dashboard')
+  const mainRef = useRef(null)
+
+  useEffect(() => {
+    if (mainRef.current) {
+      mainRef.current.scrollTop = 0
+    }
+    window.scrollTo(0, 0)
+  }, [view])
+
   const [sidebarExpanded, setSidebarExpanded] = useState(() => {
     const saved = localStorage.getItem('sidebarExpanded')
     return saved !== null ? JSON.parse(saved) : true
@@ -457,7 +466,7 @@ function App() {
         "flex flex-col relative",
         isPS5 ? "h-screen flex-1 min-h-0" : "md:h-screen md:flex-1 md:min-h-0"
       )}>
-        <main className={cn(
+        <main ref={mainRef} className={cn(
           "custom-scrollbar max-w-[1800px] mx-auto w-full flex flex-col",
           isPS5 ? "pt-16 px-16 pb-12 flex-1 overflow-y-auto" : "pt-6 px-6 pb-36 md:pt-16 md:px-16 md:pb-12 md:flex-1 md:overflow-y-auto"
         )}>
