From c337655dde69d3e6107664a67fce7ef21f15ce45 Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Fri, 12 Jun 2026 11:43:25 -0700
Subject: [PATCH] design(preview): match header layout order to Base44
 reference (URL bar on left, device toggles on right)

---
 .../components/project/project-icon-rail.tsx  | 90 +++++++++----------
 1 file changed, 45 insertions(+), 45 deletions(-)

diff --git a/vibn-frontend/components/project/project-icon-rail.tsx b/vibn-frontend/components/project/project-icon-rail.tsx
index f518137e..7cde840d 100644
--- a/vibn-frontend/components/project/project-icon-rail.tsx
+++ b/vibn-frontend/components/project/project-icon-rail.tsx
@@ -105,6 +105,51 @@ function PreviewDeviceToggles() {
     <div
       style={{ display: "flex", alignItems: "center", gap: 8, width: "100%" }}
     >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          background: "#fafafa",
+          border: "1px solid #e4e4e7",
+          padding: "4px 12px",
+          borderRadius: 8,
+          height: 34,
+          flex: 1, // Let the URL bar grow to fill the header space
+          minWidth: 320,
+          color: "#71717a",
+          fontSize: "0.75rem",
+        }}
+      >
+        <span style={{ opacity: 0.6 }}>🌐</span>
+        <input
+          type="text"
+          value={displayUrl}
+          readOnly
+          placeholder="No dev server running..."
+          style={{
+            background: "transparent",
+            border: "none",
+            outline: "none",
+            width: "100%",
+            color: "#18181b",
+            fontSize: "0.75rem",
+            textOverflow: "ellipsis",
+          }}
+        />
+        {displayUrl && (
+          <a
+            href={displayUrl}
+            target="_blank"
+            rel="noreferrer"
+            title="Open preview in new tab"
+            style={{ color: "#71717a", display: "flex", marginLeft: 4 }}
+          >
+            <ExternalLink size={14} />
+          </a>
+        )}
+      </div>
+
       <div
         style={{
           display: "flex",
@@ -193,51 +238,6 @@ function PreviewDeviceToggles() {
           Mobile
         </button>
       </div>
-
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 6,
-          background: "#fafafa",
-          border: "1px solid #e4e4e7",
-          padding: "4px 12px",
-          borderRadius: 8,
-          height: 34,
-          flex: 1, // Let the URL bar grow to fill the header space
-          minWidth: 320,
-          color: "#71717a",
-          fontSize: "0.75rem",
-        }}
-      >
-        <span style={{ opacity: 0.6 }}>🌐</span>
-        <input
-          type="text"
-          value={displayUrl}
-          readOnly
-          placeholder="No dev server running..."
-          style={{
-            background: "transparent",
-            border: "none",
-            outline: "none",
-            width: "100%",
-            color: "#18181b",
-            fontSize: "0.75rem",
-            textOverflow: "ellipsis",
-          }}
-        />
-        {displayUrl && (
-          <a
-            href={displayUrl}
-            target="_blank"
-            rel="noreferrer"
-            title="Open preview in new tab"
-            style={{ color: "#71717a", display: "flex", marginLeft: 4 }}
-          >
-            <ExternalLink size={14} />
-          </a>
-        )}
-      </div>
     </div>
   );
 }