Centralize page width/margins in one layout container

Move width + side-margin control to a single universal page wrapper in
App so every section is consistent (and stays that way going forward),
removing the per-page max-width wrappers. Widen to max-w-6xl to cut the
excess side space. Move the loop builder's Back button to the top-left
and capitalize it (Back / All loops) with an arrow icon.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: EfeAcar6431

packages/app/src/App.tsx

@@ -331,26 +331,33 @@ function Shell(): React.ReactElement {
           </div>
         </header>
         <div className="flex min-h-0 flex-1">
-          <div className="min-h-0 flex-1 overflow-y-auto p-5">
-            {nav === 'overview' && <OverviewArea />}
-            {nav === 'chat' && (
-              <ChatPage
-                chatId={chatId}
-                project={project}
-                projects={allProjects}
-                onProjectChange={setProject}
-                onAddFolder={() => void openExistingFolder()}
-                onChanges={setChanges}
-                onSessionCreated={(id) => {
-                  setChatId(id);
-                  setChatsKey((k) => k + 1);
-                  if (project) setExpanded((e) => new Set(e).add(project));
-                }}
-              />
+          <div className="min-h-0 flex-1 overflow-y-auto">
+            {nav === 'chat' ? (
+              <div className="h-full px-6 py-5">
+                <ChatPage
+                  chatId={chatId}
+                  project={project}
+                  projects={allProjects}
+                  onProjectChange={setProject}
+                  onAddFolder={() => void openExistingFolder()}
+                  onChanges={setChanges}
+                  onSessionCreated={(id) => {
+                    setChatId(id);
+                    setChatsKey((k) => k + 1);
+                    if (project) setExpanded((e) => new Set(e).add(project));
+                  }}
+                />
+              </div>
+            ) : (
+              // Universal page container: one place controls width + side
+              // margins for every section so they stay consistent.
+              <div className="mx-auto w-full max-w-6xl px-6 py-5">
+                {nav === 'overview' && <OverviewArea />}
+                {nav === 'loops' && <LoopsPage projects={allProjects} project={project} />}
+                {nav === 'plugins' && <PluginsPage project={project} />}
+                {nav === 'settings' && <SettingsArea onBack={() => setNav(prevNav)} />}
+              </div>
             )}
-            {nav === 'loops' && <LoopsPage projects={allProjects} project={project} />}
-            {nav === 'plugins' && <PluginsPage project={project} />}
-            {nav === 'settings' && <SettingsArea onBack={() => setNav(prevNav)} />}
           </div>
           {sidePanelOpen && (
             <aside className="w-96 shrink-0 border-l border-border bg-panel">

packages/app/src/pages/Loops.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import {
+  ArrowLeft,
   ArrowUpCircle,
   Bug,
   Check,
@@ -164,13 +165,13 @@ const LOOP_EXAMPLES: Array<{ icon: LucideIcon; title: string; desc: string; prom
 /** Hand-holding empty state: what a loop is, how it works, and ready-to-run examples. */
 function LoopsEmpty({ onStart }: { onStart: (request?: string) => void }): React.ReactElement {
   return (
-    <div className="mx-auto max-w-3xl pb-10">
+    <div className="pb-10">
       <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-border bg-panel2 px-3 py-1 text-xs font-medium text-muted">
         <Repeat className="h-3.5 w-3.5 text-accent" strokeWidth={2.5} />
         Autonomous loops
       </div>
       <h2 className="text-2xl font-semibold tracking-tight">Hand off a goal — CodeRouter works until it’s actually done.</h2>
-      <p className="mt-3 text-sm leading-relaxed text-muted">
+      <p className="mt-3 max-w-3xl text-sm leading-relaxed text-muted">
         A loop is an agent on autopilot <span className="text-text">with a finish line</span>. You describe the outcome you
         want — “make the tests pass”, “get coverage to 80%”, “clear all the type errors”. CodeRouter turns it into a plan
         you approve, then repeats <span className="text-text">edit → run your checks → fix what failed</span> over and
@@ -292,9 +293,10 @@ function NewLoop({
   };
 
   return (
-    <div className="mx-auto max-w-3xl">
-      <button className="mb-4 text-sm text-muted hover:text-text" onClick={onCancel}>
-        ← back
+    <div>
+      <button className="mb-4 flex items-center gap-1.5 text-sm text-muted transition-colors hover:text-text" onClick={onCancel}>
+        <ArrowLeft className="h-4 w-4" strokeWidth={2} />
+        Back
       </button>
 
       <Section title="What do you want done?">
@@ -495,9 +497,10 @@ function LoopDetail({ cwd, id, onBack }: { cwd: string; id: string; onBack: () =
   const running = loop.status === 'running' || loop.status === 'queued';
 
   return (
-    <div className="mx-auto w-full max-w-5xl">
-      <button className="mb-4 text-sm text-muted hover:text-text" onClick={onBack}>
-        ← all loops
+    <div>
+      <button className="mb-4 flex items-center gap-1.5 text-sm text-muted transition-colors hover:text-text" onClick={onBack}>
+        <ArrowLeft className="h-4 w-4" strokeWidth={2} />
+        All loops
       </button>
 
       <div className="mb-4 flex items-start justify-between gap-4">

packages/app/src/pages/OverviewArea.tsx

@@ -7,7 +7,7 @@ import { UsagePage } from './Usage';
 export function OverviewArea(): React.ReactElement {
   const [tab, setTab] = useState('overview');
   return (
-    <div className="mx-auto w-full max-w-5xl">
+    <div>
       <Tabs
         tabs={[
           { id: 'overview', label: 'Overview' },

packages/app/src/pages/Plugins.tsx

@@ -7,7 +7,7 @@ import { AssetsPage } from './Assets';
 export function PluginsPage({ project }: { project: string | null }): React.ReactElement {
   const [tab, setTab] = useState('installed');
   return (
-    <div className="mx-auto w-full max-w-5xl">
+    <div>
       <Tabs
         tabs={[
           { id: 'installed', label: 'Plugins' },

packages/app/src/pages/SettingsArea.tsx

@@ -9,7 +9,7 @@ import { SpendingPage } from './Spending';
 export function SettingsArea({ onBack }: { onBack?: () => void }): React.ReactElement {
   const [tab, setTab] = useState('general');
   return (
-    <div className="mx-auto w-full max-w-5xl">
+    <div>
       {onBack && (
         <button
           onClick={onBack}