Merge pull request #132 from multica-ai/refactor/desktop-page-container

refactor(desktop): add container wrapper to page layouts

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>
   )
 }

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>
   )
 }

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>
   )
 }

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>
   )
 }

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>
   )
 }