fix(dashboard): content scroll overflow bug

This commit is contained in:
K7ZVX 2026-05-12 16:46:51 +00:00
commit 374fb835c5
4 changed files with 327 additions and 182 deletions

View file

@ -64,9 +64,9 @@ export default function Layout({ children }: LayoutProps) {
})
return (
<div className="flex min-h-screen bg-bg text-slate-200">
<div className="flex h-screen overflow-hidden bg-bg text-slate-200">
{/* Sidebar */}
<aside className="fixed left-0 top-0 h-screen w-[220px] bg-bg-card border-r border-border flex flex-col">
<aside className="w-[220px] flex-shrink-0 bg-bg-card border-r border-border flex flex-col overflow-y-auto">
{/* Logo */}
<div className="p-5 border-b border-border">
<div className="flex items-center gap-3">
@ -129,9 +129,9 @@ export default function Layout({ children }: LayoutProps) {
</aside>
{/* Main content */}
<div className="ml-[220px] flex-1 flex flex-col">
<div className="flex-1 flex flex-col overflow-hidden">
{/* Header */}
<header className="h-14 border-b border-border bg-bg-card flex items-center justify-between px-6">
<header className="h-14 flex-shrink-0 border-b border-border bg-bg-card flex items-center justify-between px-6">
<h1 className="text-lg font-semibold">
{getPageTitle(location.pathname)}
</h1>
@ -155,7 +155,7 @@ export default function Layout({ children }: LayoutProps) {
</header>
{/* Page content */}
<main className="flex-1 p-6 overflow-auto">{children}</main>
<main className="flex-1 overflow-y-auto p-6">{children}</main>
</div>
</div>
)

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,20 +1,17 @@
<!DOCTYPE html>
<html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MeshAI Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<script type="module" crossorigin src="/assets/index-DnO02g6m.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DdqEB3wX.css">
</head>
<body style="background:#0a0e17;color:#e2e8f0;font-family:system-ui,-apple-system,sans-serif;display:flex;align-items:center;justify-content:center;height:100vh;margin:0">
<div style="text-align:center;max-width:600px;padding:2rem">
<h1 style="font-size:2.5rem;margin-bottom:1rem;font-weight:600">MeshAI Dashboard</h1>
<p style="color:#64748b;margin-bottom:2rem">Frontend build pending - API is live.</p>
<div style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap">
<a href="/api/status" style="color:#60a5fa;text-decoration:none;padding:0.5rem 1rem;border:1px solid #334155;border-radius:0.5rem">/api/status</a>
<a href="/api/health" style="color:#60a5fa;text-decoration:none;padding:0.5rem 1rem;border:1px solid #334155;border-radius:0.5rem">/api/health</a>
<a href="/api/nodes" style="color:#60a5fa;text-decoration:none;padding:0.5rem 1rem;border:1px solid #334155;border-radius:0.5rem">/api/nodes</a>
<a href="/api/config" style="color:#60a5fa;text-decoration:none;padding:0.5rem 1rem;border:1px solid #334155;border-radius:0.5rem">/api/config</a>
</div>
</div>
<body>
<div id="root"></div>
</body>
</html>