From 2d8fbbbd81af25c8946ac433d8c134fef17f0f10 Mon Sep 17 00:00:00 2001
From: Mark Henderson <mark@getacquired.com>
Date: Thu, 5 Mar 2026 20:28:24 -0800
Subject: [PATCH] Move design configurables to right panel, hide shell right
 panel on design tab

- ProjectShell right panel (Discovery/Captured) hidden when on design tab
- SurfaceSection restructured: scaffold preview center, controls right panel (280px)
- Library cards in 2-col grid, configurator and color picker scroll in right panel
- Main content area uses full height without extra padding

Made-with: Cursor
---
 .../project/[projectId]/design/page.tsx       | 30 +++++++++++++------
 components/layout/project-shell.tsx           |  9 +++---
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/app/[workspace]/project/[projectId]/design/page.tsx b/app/[workspace]/project/[projectId]/design/page.tsx
index 31b7d45..03e2882 100644
--- a/app/[workspace]/project/[projectId]/design/page.tsx
+++ b/app/[workspace]/project/[projectId]/design/page.tsx
@@ -558,15 +558,19 @@ function SurfaceSection({
   const isLocked = !!lockedThemeId;
 
   return (
-    <div style={{ display: "flex", flexDirection: "column", height: "100%", gap: 0 }}>
+    <div style={{ display: "flex", flexDirection: "row", height: "100%", gap: 0 }}>
 
-      {/* Browser chrome + scaffold */}
+      {/* Center — browser chrome + scaffold */}
+      <div style={{
+        flex: 1, minWidth: 0, display: "flex", flexDirection: "column",
+        padding: "20px 20px 20px 0",
+      }}>
       <div style={{
         flex: 1, borderRadius: 10, overflow: "hidden",
         border: "1px solid #e8e4dc",
         boxShadow: "0 1px 4px #1a1a1a06",
         display: "flex", flexDirection: "column",
-        minHeight: 460,
+        minHeight: 0,
       }}>
         {/* Chrome bar */}
         <div style={{
@@ -600,11 +604,18 @@ function SurfaceSection({
         </div>
       </div>
 
-      {/* Controls below render */}
-      <div style={{ flexShrink: 0, paddingTop: 18, display: "flex", flexDirection: "column", gap: 14 }}>
+      </div>{/* end center scaffold wrapper */}
 
-        {/* Library capability cards */}
-        <div style={{ display: "grid", gridTemplateColumns: `repeat(${Math.min(surface.themes.length, 4)}, 1fr)`, gap: 8 }}>
+      {/* Right — controls panel */}
+      <div style={{
+        width: 280, flexShrink: 0, borderLeft: "1px solid #e8e4dc",
+        background: "#fff", overflow: "auto",
+        display: "flex", flexDirection: "column", gap: 0,
+      }}>
+      <div style={{ padding: "16px 16px", display: "flex", flexDirection: "column", gap: 14 }}>
+
+        {/* Library capability cards — 2-col grid */}
+        <div style={{ display: "grid", gridTemplateColumns: `repeat(${Math.min(surface.themes.length, 2)}, 1fr)`, gap: 6 }}>
           {surface.themes.map(theme => {
             const isActive = theme.id === previewId;
             const isThisLocked = theme.id === lockedThemeId;
@@ -779,7 +790,8 @@ function SurfaceSection({
             </button>
           )}
         </div>
-      </div>
+      </div>{/* end inner padding div */}
+      </div>{/* end right panel */}
     </div>
   );
 }
@@ -1081,7 +1093,7 @@ export default function DesignPage({ params }: { params: Promise<{ workspace: st
       </div>
 
       {/* Main content */}
-      <div style={{ flex: 1, overflow: "auto", padding: "24px 28px" }}>
+      <div style={{ flex: 1, overflow: "hidden", display: "flex", flexDirection: "column", padding: "0 0 0 24px" }}>
         {currentSurface && (
           <SurfaceSection
             surface={currentSurface}
diff --git a/components/layout/project-shell.tsx b/components/layout/project-shell.tsx
index 2db980a..e908cf0 100644
--- a/components/layout/project-shell.tsx
+++ b/components/layout/project-shell.tsx
@@ -239,15 +239,16 @@ export function ProjectShell({
           </div>
         </div>
 
-        {/* Right panel */}
+        {/* Right panel — hidden on design tab (design page has its own right panel) */}
         <div className="vibn-right-panel" style={{
-          width: 230,
-          borderLeft: "1px solid #e8e4dc",
+          width: activeTab === "design" ? 0 : 230,
+          borderLeft: activeTab === "design" ? "none" : "1px solid #e8e4dc",
           background: "#fff",
-          padding: "22px 18px",
+          padding: activeTab === "design" ? 0 : "22px 18px",
           overflow: "auto",
           flexShrink: 0,
           fontFamily: "Outfit, sans-serif",
+          display: activeTab === "design" ? "none" : undefined,
         }}>
           {/* Discovery phases */}
           <SectionLabel>Discovery</SectionLabel>