From a52557f35bf43bddc71d9f19740dc395996b9684 Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Fri, 12 Jun 2026 11:48:33 -0700
Subject: [PATCH] design(preview): consolidate desktop/mobile toggles inside
 the URL bar for a cleaner layout

---
 .../components/project/project-icon-rail.tsx  | 110 +++++++++---------
 1 file changed, 53 insertions(+), 57 deletions(-)

diff --git a/vibn-frontend/components/project/project-icon-rail.tsx b/vibn-frontend/components/project/project-icon-rail.tsx
index abfb0c1..6bd4db5 100644
--- a/vibn-frontend/components/project/project-icon-rail.tsx
+++ b/vibn-frontend/components/project/project-icon-rail.tsx
@@ -172,79 +172,75 @@ function PreviewDeviceToggles() {
             paddingLeft: 4,
           }}
         />
+
+        {/* Device Toggles Inside the Address Bar */}
+        <div style={{ display: "flex", gap: 2, alignItems: "center", marginRight: 4 }}>
+          <button
+            onClick={() => setDeviceMode("desktop")}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 24,
+              height: 24,
+              borderRadius: 4,
+              border: "none",
+              cursor: "pointer",
+              transition: "all 0.15s",
+              background: deviceMode === "desktop" ? "#e4e4e7" : "transparent",
+              color: deviceMode === "desktop" ? "#18181b" : "#71717a",
+            }}
+            title="Desktop view"
+          >
+            <Monitor size={12} />
+          </button>
+          <button
+            onClick={() => setDeviceMode("mobile")}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 24,
+              height: 24,
+              borderRadius: 4,
+              border: "none",
+              cursor: "pointer",
+              transition: "all 0.15s",
+              background: deviceMode === "mobile" ? "#e4e4e7" : "transparent",
+              color: deviceMode === "mobile" ? "#18181b" : "#71717a",
+            }}
+            title="Mobile view"
+          >
+            <Smartphone size={12} />
+          </button>
+        </div>
+
+        <div
+          style={{
+            width: 1,
+            height: 14,
+            background: "#e4e4e7",
+            margin: "0 4px",
+          }}
+        />
+
         {displayUrl && (
           <a
             href={displayUrl}
             target="_blank"
             rel="noreferrer"
             title="Open preview in new tab"
-            style={{ color: "#71717a", display: "flex", marginLeft: 4 }}
+            style={{ color: "#71717a", display: "flex", padding: "4px" }}
           >
             <ExternalLink size={14} />
           </a>
         )}
       </div>
-
-      <div
-        style={{
-          display: "flex",
-          gap: 4,
-          background: "#f4f4f5",
-          padding: 4,
-          borderRadius: 8,
-          border: "1px solid #e4e4e7",
-        }}
-      >
-        <button
-          onClick={() => setDeviceMode("desktop")}
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: 32,
-            height: 26,
-            borderRadius: 6,
-            border: "none",
-            cursor: "pointer",
-            transition: "all 0.15s",
-            background: deviceMode === "desktop" ? "#ffffff" : "transparent",
-            color: deviceMode === "desktop" ? "#18181b" : "#71717a",
-            boxShadow:
-              deviceMode === "desktop" ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
-          }}
-          title="Desktop view"
-        >
-          <Monitor size={14} />
-        </button>
-        <button
-          onClick={() => setDeviceMode("mobile")}
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: 32,
-            height: 26,
-            borderRadius: 6,
-            border: "none",
-            cursor: "pointer",
-            transition: "all 0.15s",
-            background: deviceMode === "mobile" ? "#ffffff" : "transparent",
-            color: deviceMode === "mobile" ? "#18181b" : "#71717a",
-            boxShadow:
-              deviceMode === "mobile" ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
-          }}
-          title="Mobile view"
-        >
-          <Smartphone size={14} />
-        </button>
-      </div>
     </div>
   );
 }
 
 const bar: React.CSSProperties = {
-  display: "flex",
-  flexDirection: "row",
   alignItems: "center",
   flex: 1,
   minWidth: 0,