refactor: move design controls below scaffold preview

Made-with: Cursor

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

@@ -320,63 +320,6 @@ 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">
-        {surface.themes.map(theme => {
-          const isActive = theme.id === previewId;
-          const isLocked = theme.id === lockedThemeId;
-          return (
-            <button
-              key={theme.id}
-              onClick={() => !lockedThemeId && onSelect(theme.id)}
-              disabled={!!lockedThemeId && !isLocked}
-              className={cn(
-                "flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all border",
-                isActive && isLocked
-                  ? "bg-foreground text-background border-foreground"
-                  : isActive
-                  ? "bg-foreground text-background border-foreground"
-                  : lockedThemeId
-                  ? "opacity-30 border-transparent text-muted-foreground cursor-not-allowed"
-                  : "border-border text-muted-foreground hover:border-foreground/40 hover:text-foreground"
-              )}
-            >
-              {isLocked && <Lock className="w-2.5 h-2.5" />}
-              {theme.name}
-            </button>
-          );
-        })}
-
-        {/* Spacer + actions */}
-        <div className="ml-auto flex items-center gap-2">
-          {activeTheme && (
-            <a
-              href={activeTheme.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-[11px] text-muted-foreground hover:text-foreground transition-colors"
-            >
-              {activeTheme.name} docs ↗
-            </a>
-          )}
-          {lockedThemeId ? (
-            <Button variant="outline" size="sm" onClick={onUnlock} className="gap-1.5 text-xs h-7">
-              <Pencil className="h-3 w-3" />
-              Change
-            </Button>
-          ) : (
-            <Button
-              size="sm"
-              onClick={onLock}
-              disabled={!selectedThemeId || saving}
-              className="gap-1.5 text-xs h-7"
-            >
-              {saving ? <Loader2 className="h-3 w-3 animate-spin" /> : <Lock className="h-3 w-3" />}
-              Lock in
-            </Button>
-          )}
-        </div>
-      </div>
 
       {/* Scaffold preview — browser chrome frame */}
       <div className="flex-1 rounded-xl overflow-hidden border" style={{ minHeight: 460 }}>
@@ -397,24 +340,81 @@ function SurfaceSection({
             ? <ScaffoldComponent />
             : (
               <div className="h-full flex items-center justify-center text-muted-foreground text-xs">
-                Select a library above to preview
+                Select a library below to preview
               </div>
             )
           }
         </div>
       </div>
 
-      {/* Theme description */}
+      {/* Controls bar — library tabs + description + lock in */}
-      {activeTheme && (
+      <div className="shrink-0 pt-3 space-y-2">
-        <div className="pt-3 flex items-center gap-3">
+        {/* Library tab row */}
-          <p className="text-xs text-muted-foreground flex-1">{activeTheme.description}</p>
+        <div className="flex items-center gap-1.5 flex-wrap">
-          <div className="flex gap-1">
+          {surface.themes.map(theme => {
-            {activeTheme.tags.map(t => (
+            const isActive = theme.id === previewId;
-              <Badge key={t} variant="secondary" className="text-[9px] px-1.5 py-0">{t}</Badge>
+            const isLocked = theme.id === lockedThemeId;
-            ))}
+            return (
-          </div>
+              <button
+                key={theme.id}
+                onClick={() => !lockedThemeId && onSelect(theme.id)}
+                disabled={!!lockedThemeId && !isLocked}
+                className={cn(
+                  "flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all border",
+                  isActive && isLocked
+                    ? "bg-foreground text-background border-foreground"
+                    : isActive
+                    ? "bg-foreground text-background border-foreground"
+                    : lockedThemeId
+                    ? "opacity-30 border-transparent text-muted-foreground cursor-not-allowed"
+                    : "border-border text-muted-foreground hover:border-foreground/40 hover:text-foreground"
+                )}
+              >
+                {isLocked && <Lock className="w-2.5 h-2.5" />}
+                {theme.name}
+              </button>
+            );
+          })}
         </div>
-      )}
+
+        {/* Description + tags + actions */}
+        <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 shrink-0"
+              >
+                Docs ↗
+              </a>
+            </>
+          )}
+          {lockedThemeId ? (
+            <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>
+          ) : (
+            <Button
+              size="sm"
+              onClick={onLock}
+              disabled={!selectedThemeId || saving}
+              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
+            </Button>
+          )}
+        </div>
+      </div>
     </div>
   );
 }