From b5313b643f0cf7aa12bc912cdb87d270a4898b22 Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Thu, 12 Feb 2026 12:03:41 +0800
Subject: [PATCH] refactor(desktop): add container wrapper to page layouts

- Wrap page content with container class for consistent max-width
- Move overflow-auto to outer div so scrollbar stays at viewport edge
- Add self-stretch to vertical divider in home page

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/desktop/src/renderer/src/pages/channels.tsx | 4 +++-
 apps/desktop/src/renderer/src/pages/crons.tsx    | 4 +++-
 apps/desktop/src/renderer/src/pages/home.tsx     | 6 ++++--
 apps/desktop/src/renderer/src/pages/skills.tsx   | 4 +++-
 apps/desktop/src/renderer/src/pages/tools.tsx    | 4 +++-
 5 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/apps/desktop/src/renderer/src/pages/channels.tsx b/apps/desktop/src/renderer/src/pages/channels.tsx
index 829a3056..a5c5aa4d 100644
--- a/apps/desktop/src/renderer/src/pages/channels.tsx
+++ b/apps/desktop/src/renderer/src/pages/channels.tsx
@@ -156,7 +156,8 @@ export default function ChannelsPage() {
   const { loading, error } = useChannelsStore()
 
   return (
-    <div className="h-full flex flex-col p-6 overflow-auto">
+    <div className="h-full overflow-auto">
+    <div className="container flex flex-col p-6">
       {/* Page Header */}
       <div className="mb-6">
         <h1 className="text-lg font-medium">Channels</h1>
@@ -176,5 +177,6 @@ export default function ChannelsPage() {
         )}
       </div>
     </div>
+    </div>
   )
 }
diff --git a/apps/desktop/src/renderer/src/pages/crons.tsx b/apps/desktop/src/renderer/src/pages/crons.tsx
index d278a09d..5fdc918a 100644
--- a/apps/desktop/src/renderer/src/pages/crons.tsx
+++ b/apps/desktop/src/renderer/src/pages/crons.tsx
@@ -5,7 +5,8 @@ export default function CronsPage() {
   const { jobs, loading, error, toggleJob, removeJob, refresh } = useCronJobsStore()
 
   return (
-    <div className="h-full flex flex-col p-6 overflow-auto">
+    <div className="h-full overflow-auto">
+    <div className="container flex flex-col p-6">
       {/* Page Header */}
       <div className="mb-6">
         <h1 className="text-lg font-medium">Scheduled Tasks</h1>
@@ -26,5 +27,6 @@ export default function CronsPage() {
         />
       </div>
     </div>
+    </div>
   )
 }
diff --git a/apps/desktop/src/renderer/src/pages/home.tsx b/apps/desktop/src/renderer/src/pages/home.tsx
index 1072ec6a..eca4959c 100644
--- a/apps/desktop/src/renderer/src/pages/home.tsx
+++ b/apps/desktop/src/renderer/src/pages/home.tsx
@@ -155,7 +155,8 @@ export default function HomePage() {
   const capabilitySummary = `${skillStats.enabled} skills, ${enabledTools} tools, ${connectedChannels} channels, ${cronCount} scheduled tasks`
 
   return (
-    <div className="h-full flex flex-col p-6 overflow-auto">
+    <div className="h-full overflow-auto">
+    <div className="container flex flex-col p-6 h-full">
       {/* Page Header */}
       <div className="mb-6">
         <h1 className="text-lg font-medium">Dashboard</h1>
@@ -600,7 +601,7 @@ export default function HomePage() {
           </div>
 
           {/* Vertical Divider */}
-          <div className="w-px bg-border" />
+          <div className="w-px bg-border self-stretch" />
 
           {/* Right: Authorized Devices */}
           <div className="flex-1 flex flex-col min-h-0">
@@ -651,5 +652,6 @@ export default function HomePage() {
         />
       )}
     </div>
+    </div>
   )
 }
diff --git a/apps/desktop/src/renderer/src/pages/skills.tsx b/apps/desktop/src/renderer/src/pages/skills.tsx
index 607b9977..778ff386 100644
--- a/apps/desktop/src/renderer/src/pages/skills.tsx
+++ b/apps/desktop/src/renderer/src/pages/skills.tsx
@@ -5,7 +5,8 @@ export default function SkillsPage() {
   const { skills, loading, error, toggleSkill, refresh } = useSkillsStore()
 
   return (
-    <div className="h-full flex flex-col p-6 overflow-auto">
+    <div className="h-full overflow-auto">
+    <div className="container flex flex-col p-6">
       {/* Page Header */}
       <div className="mb-6">
         <h1 className="text-lg font-medium">Skills</h1>
@@ -25,5 +26,6 @@ export default function SkillsPage() {
         />
       </div>
     </div>
+    </div>
   )
 }
diff --git a/apps/desktop/src/renderer/src/pages/tools.tsx b/apps/desktop/src/renderer/src/pages/tools.tsx
index 1d977e40..19c7e96d 100644
--- a/apps/desktop/src/renderer/src/pages/tools.tsx
+++ b/apps/desktop/src/renderer/src/pages/tools.tsx
@@ -5,7 +5,8 @@ export default function ToolsPage() {
   const { tools, loading, error, toggleTool, refresh } = useToolsStore()
 
   return (
-    <div className="h-full flex flex-col p-6 overflow-auto">
+    <div className="h-full overflow-auto">
+    <div className="container flex flex-col p-6">
       {/* Page Header */}
       <div className="mb-6">
         <h1 className="text-lg font-medium">Tools</h1>
@@ -25,5 +26,6 @@ export default function ToolsPage() {
         />
       </div>
     </div>
+    </div>
   )
 }