From 32aaf9b6abe57dbdf13cc59a573fe59e0c869b1a Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Fri, 12 Jun 2026 11:16:51 -0700
Subject: [PATCH] design(preview): align Preview and Dashboard buttons next to
 Publish button on the right

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

diff --git a/vibn-frontend/components/project/project-icon-rail.tsx b/vibn-frontend/components/project/project-icon-rail.tsx
index 2375eebd..b2c797d0 100644
--- a/vibn-frontend/components/project/project-icon-rail.tsx
+++ b/vibn-frontend/components/project/project-icon-rail.tsx
@@ -21,7 +21,7 @@ export function ProjectIconRail({ workspace, projectId, actions }: Props) {
 
   return (
     <nav style={bar} aria-label="Project sections">
-      {/* Dynamic Left Content Area (e.g. Preview Device Toggles) */}
+      {/* Dynamic Left Content Area (e.g. Preview Device Toggles & URL bar) */}
       <div
         style={{
           display: "flex",
@@ -34,50 +34,54 @@ export function ProjectIconRail({ workspace, projectId, actions }: Props) {
         {isPreviewActive && <PreviewDeviceToggles />}
       </div>
 
-      <div style={primaryGroup}>
-        <Link
-          href={`${projectBase}/preview`}
-          style={{
-            padding: "6px 14px",
-            fontSize: "0.8rem",
-            fontWeight: 500,
-            borderRadius: 6,
-            textDecoration: "none",
-            background: isPreviewActive ? "#fff" : "transparent",
-            color: isPreviewActive ? "#18181b" : "#71717a",
-            boxShadow: isPreviewActive ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
-            transition: "all 0.15s ease",
-          }}
-        >
-          Preview
-        </Link>
-        <Link
-          href={`${projectBase}/plan`}
-          style={{
-            padding: "6px 14px",
-            fontSize: "0.8rem",
-            fontWeight: 500,
-            borderRadius: 6,
-            textDecoration: "none",
-            background: !isPreviewActive ? "#fff" : "transparent",
-            color: !isPreviewActive ? "#18181b" : "#71717a",
-            boxShadow: !isPreviewActive ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
-            transition: "all 0.15s ease",
-          }}
-        >
-          Dashboard
-        </Link>
-      </div>
-
+      {/* Right Content Area (Segmented Control & Publish Button) */}
       <div
         style={{
           display: "flex",
-          flex: 1,
           justifyContent: "flex-end",
           alignItems: "center",
-          minWidth: 0,
+          gap: 12,
         }}
       >
+        <div style={primaryGroup}>
+          <Link
+            href={`${projectBase}/preview`}
+            style={{
+              padding: "6px 14px",
+              fontSize: "0.8rem",
+              fontWeight: 500,
+              borderRadius: 6,
+              textDecoration: "none",
+              background: isPreviewActive ? "#fff" : "transparent",
+              color: isPreviewActive ? "#18181b" : "#71717a",
+              boxShadow: isPreviewActive
+                ? "0 1px 2px rgba(0,0,0,0.05)"
+                : "none",
+              transition: "all 0.15s ease",
+            }}
+          >
+            Preview
+          </Link>
+          <Link
+            href={`${projectBase}/plan`}
+            style={{
+              padding: "6px 14px",
+              fontSize: "0.8rem",
+              fontWeight: 500,
+              borderRadius: 6,
+              textDecoration: "none",
+              background: !isPreviewActive ? "#fff" : "transparent",
+              color: !isPreviewActive ? "#18181b" : "#71717a",
+              boxShadow: !isPreviewActive
+                ? "0 1px 2px rgba(0,0,0,0.05)"
+                : "none",
+              transition: "all 0.15s ease",
+            }}
+          >
+            Dashboard
+          </Link>
+        </div>
+
         {actions}
       </div>
     </nav>
@@ -98,7 +102,9 @@ function PreviewDeviceToggles() {
   const displayUrl = running?.url ?? "";
 
   return (
-    <div style={{ display: "flex", alignItems: "center", gap: 8, width: "100%" }}>
+    <div
+      style={{ display: "flex", alignItems: "center", gap: 8, width: "100%" }}
+    >
       <div
         style={{
           display: "flex",