From b73900718a7f3311bf064747bcff555a4abc27b3 Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Tue, 12 May 2026 18:23:51 +0800
Subject: [PATCH] fix: constrain home page content width

---
 web/src/app/home/layout.tsx          | 16 ++++++++++++----
 web/src/app/home/monitoring/page.tsx |  6 +++---
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/web/src/app/home/layout.tsx b/web/src/app/home/layout.tsx
index 8cce527e..b1c76425 100644
--- a/web/src/app/home/layout.tsx
+++ b/web/src/app/home/layout.tsx
@@ -58,6 +58,8 @@ function isExtensionsRoute(pathname: string): boolean {
   );
 }
 
+const HOME_CONTENT_MAX_WIDTH = 'max-w-[1360px]';
+
 export default function HomeLayout({
   children,
 }: Readonly<{
@@ -134,7 +136,9 @@ function HomeLayoutInner({ children }: { children: React.ReactNode }) {
 
       <SidebarInset>
         <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
-          <div className="flex items-center gap-2 px-4">
+          <div
+            className={`mx-auto flex w-full items-center gap-2 px-4 ${HOME_CONTENT_MAX_WIDTH}`}
+          >
             <SidebarTrigger className="-ml-1" />
             <Separator
               orientation="vertical"
@@ -178,9 +182,13 @@ function HomeLayoutInner({ children }: { children: React.ReactNode }) {
           </div>
         </header>
 
-        <div className="flex-1 overflow-hidden p-4 pt-0 min-w-0">
-          {mainContent}
-        </div>
+        <main className="flex-1 overflow-hidden min-w-0 px-4 pb-4 pt-0">
+          <div
+            className={`mx-auto h-full w-full min-w-0 ${HOME_CONTENT_MAX_WIDTH}`}
+          >
+            {mainContent}
+          </div>
+        </main>
 
         <SurveyWidget />
       </SidebarInset>
diff --git a/web/src/app/home/monitoring/page.tsx b/web/src/app/home/monitoring/page.tsx
index a86b83ae..942ac2f9 100644
--- a/web/src/app/home/monitoring/page.tsx
+++ b/web/src/app/home/monitoring/page.tsx
@@ -267,8 +267,8 @@ function MonitoringPageContent() {
   return (
     <div className="w-full h-full overflow-y-auto overflow-x-hidden">
       {/* Filters and Refresh Button - Sticky */}
-      <div className="sticky top-[-1.5rem] z-10 -ml-[2rem] -mr-[1.5rem] -mt-[1.5rem] pt-[1.5rem] pb-4 bg-background">
-        <div className="ml-[2rem] mr-[1.5rem] px-[0.8rem]">
+      <div className="sticky top-0 z-10 -mt-1 pb-4 pt-1 bg-background">
+        <div>
           <div className="flex flex-wrap items-center justify-between gap-4 p-4 bg-card rounded-xl border">
             <MonitoringFilters
               selectedBots={filterState.selectedBots}
@@ -295,7 +295,7 @@ function MonitoringPageContent() {
       </div>
 
       {/* Content Area */}
-      <div className="flex flex-col gap-6 px-[0.8rem] pb-4">
+      <div className="flex flex-col gap-6 pb-4">
         {/* Overview Section */}
         <OverviewCards
           metrics={data?.overview || null}