diff --git a/app/(dashboard)/layout.tsx b/app/(dashboard)/layout.tsx
index 448647ed..829ee5c7 100644
--- a/app/(dashboard)/layout.tsx
+++ b/app/(dashboard)/layout.tsx
@@ -2,6 +2,7 @@ import { createClient } from '@/lib/supabase/server'
 import { redirect } from 'next/navigation'
 import { headers } from 'next/headers'
 import DashboardNav from '@/components/dashboard/DashboardNav'
+import { MainContainer } from '@/components/dashboard/MainContainer'
 import CompanyTabSync from '@/components/dashboard/CompanyTabSync'
 import { RecaptIdentify } from '@/components/RecaptIdentify'
 import { SandboxBanner } from '@/components/dashboard/SandboxBanner'
@@ -222,16 +223,7 @@ export default async function DashboardLayout({
           extensionNavItems={getExtensionNavItems()}
         />
         <main id="main-content" className="safe-area-main-padding md:!pb-0 md:pl-[232px]" role="main">
-          {pathname.startsWith('/e/') ? (
-            // Extension workspaces opt out of the centered max-w-5xl chrome
-            // because their content (file viewers, dashboards) wants the full
-            // viewport width.
-            <div key={companyId} className="h-full">{children}</div>
-          ) : (
-            <div key={companyId} className="max-w-5xl mx-auto px-5 py-8 md:px-8 md:py-10">
-              {children}
-            </div>
-          )}
+          <MainContainer companyId={companyId}>{children}</MainContainer>
         </main>
         {!isSandbox && (
           <RecaptIdentify
diff --git a/components/dashboard/MainContainer.tsx b/components/dashboard/MainContainer.tsx
new file mode 100644
index 00000000..b98fa56f
--- /dev/null
+++ b/components/dashboard/MainContainer.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+import type { ReactNode } from 'react'
+
+/**
+ * Picks the dashboard chrome container based on route. Extension workspaces
+ * (/e/*) want the full viewport for file viewers and dashboards; everything
+ * else gets the centered max-w-5xl card.
+ *
+ * Lives in a client component because the parent (dashboard) layout is
+ * shared across all dashboard routes. Server-side pathname checks done in
+ * the layout don't re-evaluate reliably on soft navigation between sibling
+ * routes, so the wrapper class would otherwise stick on whichever branch
+ * the first render picked.
+ */
+export function MainContainer({
+  companyId,
+  children,
+}: {
+  companyId: string | null
+  children: ReactNode
+}) {
+  const pathname = usePathname()
+  const isExtensionWorkspace = pathname.startsWith('/e/')
+
+  return isExtensionWorkspace ? (
+    <div key={companyId ?? ''} className="h-full">{children}</div>
+  ) : (
+    <div
+      key={companyId ?? ''}
+      className="max-w-5xl mx-auto px-5 py-8 md:px-8 md:py-10"
+    >
+      {children}
+    </div>
+  )
+}