From d3e56b9f3931deaa1885361149eefc04ae462237 Mon Sep 17 00:00:00 2001
From: Austin Pickett <pickett.austin@gmail.com>
Date: Fri, 24 Apr 2026 10:17:57 -0400
Subject: [PATCH] chore: refac

---
 web/src/App.tsx                         | 16 +++++++---------
 web/src/contexts/PageHeaderProvider.tsx | 14 ++++++++++----
 web/src/index.css                       | 12 +++++++++++-
 web/src/pages/EnvPage.tsx               |  4 ++--
 web/src/pages/SkillsPage.tsx            |  4 ++--
 5 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 51530c132b..3e68cc6c13 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -251,8 +251,6 @@ export default function App() {
   );
 
   const layoutVariant = theme.layoutVariant ?? "standard";
-  const mainMaxWidth =
-    layoutVariant === "tiled" ? "max-w-none" : "max-w-[1600px]";
 
   useEffect(() => {
     if (!mobileOpen) return;
@@ -463,20 +461,20 @@ export default function App() {
           </aside>
 
           <PageHeaderProvider pluginTabs={pluginTabMeta}>
-            <main
+            <div
               className={cn(
                 "relative z-2 flex min-w-0 min-h-0 flex-1 flex-col",
-                "overflow-y-auto",
-                "px-3 pb-4 sm:px-6 sm:pb-8",
+                "px-3 sm:px-6",
                 "pt-2 sm:pt-4 lg:pt-6",
+                "pb-4 sm:pb-8",
+                isDocsRoute && "min-h-0 flex-1",
               )}
             >
               <PluginSlot name="pre-main" />
               <div
                 className={cn(
-                  "mx-auto w-full",
-                  mainMaxWidth,
-                  isDocsRoute && "min-h-0 flex-1 flex flex-col",
+                  "w-full min-w-0",
+                  isDocsRoute && "min-h-0 flex flex-1 flex-col",
                 )}
               >
                 <Routes>
@@ -490,7 +488,7 @@ export default function App() {
                 </Routes>
               </div>
               <PluginSlot name="post-main" />
-            </main>
+            </div>
           </PageHeaderProvider>
         </div>
       </div>
diff --git a/web/src/contexts/PageHeaderProvider.tsx b/web/src/contexts/PageHeaderProvider.tsx
index fce5852a0b..8b8fbcd0c8 100644
--- a/web/src/contexts/PageHeaderProvider.tsx
+++ b/web/src/contexts/PageHeaderProvider.tsx
@@ -48,17 +48,19 @@ export function PageHeaderProvider({
       <div className="flex min-h-0 w-full min-w-0 flex-1 flex-col overflow-hidden">
         <header
           className={cn(
-            "z-1 box-border h-14 shrink-0 border-b border-current/20",
+            "z-1 w-full shrink-0",
+            "box-border h-14 min-h-14",
+            "border-b border-current/20",
             "bg-background-base/40 backdrop-blur-sm",
             "overflow-hidden",
+            "sm:min-h-0",
           )}
           role="banner"
         >
           <div
             className={cn(
               "flex h-full w-full min-w-0 flex-1 flex-col justify-center gap-2",
-              "px-3 py-2 sm:px-6",
-              "min-h-14 sm:min-h-0 sm:flex-row sm:items-center sm:gap-3 sm:py-0",
+              "px-3 py-2 sm:flex-row sm:items-center sm:gap-3 sm:px-6 sm:py-0",
             )}
           >
             <div className="flex min-w-0 flex-1 items-center gap-2 sm:gap-3">
@@ -78,8 +80,12 @@ export function PageHeaderProvider({
             ) : null}
           </div>
         </header>
+
         <main
-          className="flex min-h-0 w-full min-w-0 flex-1 flex-col overflow-y-auto overflow-x-hidden"
+          className={cn(
+            "min-h-0 w-full min-w-0 flex-1 flex flex-col",
+            "overflow-y-auto overflow-x-hidden [scrollbar-gutter:stable]",
+          )}
         >
           {children}
         </main>
diff --git a/web/src/index.css b/web/src/index.css
index 43cad625ed..1e5e9cb9e3 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -55,10 +55,17 @@ html {
   font-size: var(--theme-base-size);
   line-height: var(--theme-line-height);
   letter-spacing: var(--theme-letter-spacing);
+  height: 100dvh;
+  max-height: 100dvh;
+  overflow: hidden;
 }
 
 body {
   font-family: var(--theme-font-sans);
+  min-height: 0;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
 }
 
 code, kbd, pre, samp, .font-mono, .font-mono-ui {
@@ -74,7 +81,10 @@ code, kbd, pre, samp, .font-mono, .font-mono-ui {
 }
 
 #root {
-  min-height: 100dvh;
+  min-height: 0;
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
 }
 
 /* Nousnet's hermes-agent layout bumps `small` and `code` to readable
diff --git a/web/src/pages/EnvPage.tsx b/web/src/pages/EnvPage.tsx
index ebb528a347..f72ab0e947 100644
--- a/web/src/pages/EnvPage.tsx
+++ b/web/src/pages/EnvPage.tsx
@@ -548,7 +548,7 @@ export default function EnvPage() {
 
       {/* ═══════════════ LLM Providers (grouped) ═══════════════ */}
       <Card>
-        <CardHeader className="sticky top-14 z-10 bg-card border-b border-border">
+        <CardHeader className="border-b border-border bg-card">
           <div className="flex items-center gap-2">
             <Zap className="h-5 w-5 text-muted-foreground" />
             <CardTitle className="text-base">{t.env.llmProviders}</CardTitle>
@@ -577,7 +577,7 @@ export default function EnvPage() {
 
         return (
           <Card key={category}>
-            <CardHeader className="sticky top-14 z-10 bg-card border-b border-border">
+            <CardHeader className="border-b border-border bg-card">
               <div className="flex items-center gap-2">
                 <Icon className="h-5 w-5 text-muted-foreground" />
                 <CardTitle className="text-base">{label}</CardTitle>
diff --git a/web/src/pages/SkillsPage.tsx b/web/src/pages/SkillsPage.tsx
index c951d249e9..287bb74754 100644
--- a/web/src/pages/SkillsPage.tsx
+++ b/web/src/pages/SkillsPage.tsx
@@ -254,13 +254,13 @@ export default function SkillsPage() {
       <Toast toast={toast} />
 
       {/* ═══════════════ Filter panel + Content ═══════════════ */}
-      <div className="flex flex-col sm:flex-row gap-4">
+      <div className="flex flex-col sm:flex-row sm:items-start gap-4">
         {/* ---- Filter panel ---- */}
         <aside
           aria-label={t.skills.title}
           className="sm:w-56 sm:shrink-0"
         >
-          <div className="sm:sticky sm:top-4">
+          <div className="sm:sticky sm:top-0">
             <div
               className={`
                 flex flex-col