refactor: move design controls below scaffold preview

Made-with: Cursor

app/[workspace]/project/[projectId]/design/page.tsx

@@ -320,8 +320,37 @@ function SurfaceSection({
 
   return (
     <div className="flex flex-col h-full gap-0">
-      {/* Tab bar */}
+
-      <div className="flex items-center gap-1 px-1 pb-3 flex-wrap">
+      {/* Scaffold preview — browser chrome frame */}
+      <div className="flex-1 rounded-xl overflow-hidden border" style={{ minHeight: 460 }}>
+        {/* Browser chrome */}
+        <div className="flex items-center gap-1.5 px-3 h-8 border-b bg-muted/50 shrink-0">
+          <div className="w-2.5 h-2.5 rounded-full bg-zinc-300" />
+          <div className="w-2.5 h-2.5 rounded-full bg-zinc-300" />
+          <div className="w-2.5 h-2.5 rounded-full bg-zinc-300" />
+          <div className="ml-3 flex-1 max-w-xs h-5 rounded-md bg-border/60 flex items-center px-2">
+            <span className="text-[9px] text-muted-foreground truncate">
+              {activeTheme ? `/${surface.id} — ${activeTheme.name}` : ""}
+            </span>
+          </div>
+        </div>
+        {/* Scaffold */}
+        <div style={{ height: 460 }}>
+          {ScaffoldComponent
+            ? <ScaffoldComponent />
+            : (
+              <div className="h-full flex items-center justify-center text-muted-foreground text-xs">
+                Select a library below to preview
+              </div>
+            )
+          }
+        </div>
+      </div>
+
+      {/* Controls bar — library tabs + description + lock in */}
+      <div className="shrink-0 pt-3 space-y-2">
+        {/* Library tab row */}
+        <div className="flex items-center gap-1.5 flex-wrap">
           {surface.themes.map(theme => {
             const isActive = theme.id === previewId;
             const isLocked = theme.id === lockedThemeId;
@@ -346,21 +375,30 @@ function SurfaceSection({
               </button>
             );
           })}
+        </div>
 
-        {/* Spacer + actions */}
+        {/* Description + tags + actions */}
-        <div className="ml-auto flex items-center gap-2">
+        <div className="flex items-center gap-3">
           {activeTheme && (
+            <>
+              <p className="text-xs text-muted-foreground flex-1">{activeTheme.description}</p>
+              <div className="flex gap-1">
+                {activeTheme.tags.map(t => (
+                  <Badge key={t} variant="secondary" className="text-[9px] px-1.5 py-0">{t}</Badge>
+                ))}
+              </div>
               <a
                 href={activeTheme.url}
                 target="_blank"
                 rel="noopener noreferrer"
-              className="text-[11px] text-muted-foreground hover:text-foreground transition-colors"
+                className="text-[11px] text-muted-foreground hover:text-foreground transition-colors shrink-0"
               >
-              {activeTheme.name} docs ↗
+                Docs ↗
               </a>
+            </>
           )}
           {lockedThemeId ? (
-            <Button variant="outline" size="sm" onClick={onUnlock} className="gap-1.5 text-xs h-7">
+            <Button variant="outline" size="sm" onClick={onUnlock} className="gap-1.5 text-xs h-7 shrink-0">
               <Pencil className="h-3 w-3" />
               Change
             </Button>
@@ -369,7 +407,7 @@ function SurfaceSection({
               size="sm"
               onClick={onLock}
               disabled={!selectedThemeId || saving}
-              className="gap-1.5 text-xs h-7"
+              className="gap-1.5 text-xs h-7 shrink-0"
             >
               {saving ? <Loader2 className="h-3 w-3 animate-spin" /> : <Lock className="h-3 w-3" />}
               Lock in
@@ -377,44 +415,6 @@ function SurfaceSection({
           )}
         </div>
       </div>
-
-      {/* Scaffold preview — browser chrome frame */}
-      <div className="flex-1 rounded-xl overflow-hidden border" style={{ minHeight: 460 }}>
-        {/* Browser chrome */}
-        <div className="flex items-center gap-1.5 px-3 h-8 border-b bg-muted/50 shrink-0">
-          <div className="w-2.5 h-2.5 rounded-full bg-zinc-300" />
-          <div className="w-2.5 h-2.5 rounded-full bg-zinc-300" />
-          <div className="w-2.5 h-2.5 rounded-full bg-zinc-300" />
-          <div className="ml-3 flex-1 max-w-xs h-5 rounded-md bg-border/60 flex items-center px-2">
-            <span className="text-[9px] text-muted-foreground truncate">
-              {activeTheme ? `/${surface.id} — ${activeTheme.name}` : ""}
-            </span>
-          </div>
-        </div>
-        {/* Scaffold */}
-        <div style={{ height: 460 }}>
-          {ScaffoldComponent
-            ? <ScaffoldComponent />
-            : (
-              <div className="h-full flex items-center justify-center text-muted-foreground text-xs">
-                Select a library above to preview
-              </div>
-            )
-          }
-        </div>
-      </div>
-
-      {/* Theme description */}
-      {activeTheme && (
-        <div className="pt-3 flex items-center gap-3">
-          <p className="text-xs text-muted-foreground flex-1">{activeTheme.description}</p>
-          <div className="flex gap-1">
-            {activeTheme.tags.map(t => (
-              <Badge key={t} variant="secondary" className="text-[9px] px-1.5 py-0">{t}</Badge>
-            ))}
-          </div>
-        </div>
-      )}
     </div>
   );
 }