feat(web): rework mod inspector layout

Fill the viewport with a fixed sidebar of highlightable type-filter
icons over an independently scrolling tree, and let the viewer expand
into a full-height scene.

apps/web/src/App.tsx

@@ -19,12 +19,17 @@ const SetupsPage = lazy(() => import('./pages/SetupsPage'));
 const SetupPage = lazy(() => import('./pages/SetupPage'));
 
 export default function App() {
-  const { pathname } = useLocation();
+  const pathname = useLocation().pathname;
   const isModRoute = pathname.startsWith('/mod/');
+  // The inspector view is full-bleed/viewport-height; the setup sub-route keeps the standard centered layout.
+  const isModView = /^\/mod\/[^/]+$/.test(pathname);
 
   return (
     <div className="min-h-screen bg-zinc-950 text-zinc-100">
-      <header className="border-b border-zinc-800">
+      {/* For the mod route the layout is full-bleed and fills the viewport so
+          the sidebar can scroll independently and the viewer gets all the space. */}
+      <div className={"flex min-h-screen flex-col " + (isModView ? "h-screen" : "")}>
+        <header className={"border-b border-zinc-800 " + (isModRoute ? "shrink-0" : "")}>
         {isModRoute ? (
           <ModHeader />
         ) : (
@@ -43,7 +48,7 @@ export default function App() {
           </div>
         )}
       </header>
-      <main className="mx-auto max-w-5xl px-4 py-8">
+      <main className={(isModView ? "min-h-0 flex-1" : "mx-auto max-w-5xl px-4 py-8")}>
         <Routes>
           <Route path="/" element={<SearchPage />} />
           <Route path="/mod/:id" element={<ModPage />} />
@@ -65,6 +70,7 @@ export default function App() {
           <Route path="/bgm/:id/setups/:type/:setup" element={<Suspense fallback={null}><SetupPage /></Suspense>} />
         </Routes>
       </main>
+      </div>
     </div>
   );
 }