design(preview): organize address bar tools, move refresh button to far left

vibn-frontend/components/project/project-icon-rail.tsx

@@ -21,16 +21,6 @@ export function ProjectIconRail({ workspace, projectId, actions }: Props) {
 
   return (
     <nav style={bar} aria-label="Project sections">
-      {/* Dynamic Left Content Area (e.g. Preview Device Toggles & URL bar) */}
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 12,
-          flex: 1,
-          minWidth: 0,
-        }}
-      >
       <div style={primaryGroup}>
         <Link
           href={`${projectBase}/preview`}
@@ -42,9 +32,7 @@ export function ProjectIconRail({ workspace, projectId, actions }: Props) {
             textDecoration: "none",
             background: isPreviewActive ? "#ffffff" : "transparent",
             color: isPreviewActive ? "#18181b" : "#71717a",
-              boxShadow: isPreviewActive
+            boxShadow: isPreviewActive ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
-                ? "0 1px 2px rgba(0,0,0,0.05)"
-                : "none",
             transition: "all 0.15s ease",
           }}
         >
@@ -60,9 +48,7 @@ export function ProjectIconRail({ workspace, projectId, actions }: Props) {
             textDecoration: "none",
             background: !isPreviewActive ? "#ffffff" : "transparent",
             color: !isPreviewActive ? "#18181b" : "#71717a",
-              boxShadow: !isPreviewActive
+            boxShadow: !isPreviewActive ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
-                ? "0 1px 2px rgba(0,0,0,0.05)"
-                : "none",
             transition: "all 0.15s ease",
           }}
         >
@@ -70,16 +56,24 @@ export function ProjectIconRail({ workspace, projectId, actions }: Props) {
         </Link>
       </div>
 
-        {isPreviewActive && <PreviewDeviceToggles />}
-      </div>
-
-      {/* Right Content Area (Publish Button) */}
       <div
         style={{
           display: "flex",
-          justifyContent: "flex-end",
           alignItems: "center",
-          gap: 12,
+          flex: 1,
+          minWidth: 0,
+          marginLeft: 12,
+        }}
+      >
+        {isPreviewActive && <PreviewDeviceToggles />}
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          flexShrink: 0,
+          marginLeft: 12,
         }}
       >
         {actions}
@@ -102,9 +96,6 @@ function PreviewDeviceToggles() {
   const displayUrl = running?.url ?? "";
 
   return (
-    <div
-      style={{ display: "flex", alignItems: "center", gap: 8, width: "100%" }}
-    >
     <div
       style={{
         display: "flex",
@@ -115,8 +106,8 @@ function PreviewDeviceToggles() {
         padding: "4px 8px",
         borderRadius: 8,
         height: 34,
-          flex: 1, // Let the URL bar grow to fill the header space
+        flex: 1,
-          minWidth: 320,
+        minWidth: 0, // critical for input overflow to work
         color: "#71717a",
         fontSize: "0.75rem",
       }}
@@ -136,6 +127,7 @@ function PreviewDeviceToggles() {
           transition: "all 0.15s",
           background: "transparent",
           color: "#71717a",
+          flexShrink: 0,
         }}
         onMouseEnter={(e) => {
           e.currentTarget.style.background = "#e4e4e7";
@@ -148,14 +140,18 @@ function PreviewDeviceToggles() {
       >
         <RotateCw size={12} />
       </button>
+
       <div
         style={{
           width: 1,
           height: 14,
           background: "#e4e4e7",
           margin: "0 2px",
+          flexShrink: 0,
         }}
       />
+
+      <span style={{ opacity: 0.6, flexShrink: 0 }}>🌐</span>
       <input
         type="text"
         value={displayUrl}
@@ -165,7 +161,8 @@ function PreviewDeviceToggles() {
           background: "transparent",
           border: "none",
           outline: "none",
-            width: "100%",
+          flex: 1,
+          minWidth: 0,
           color: "#18181b",
           fontSize: "0.75rem",
           textOverflow: "ellipsis",
@@ -173,8 +170,20 @@ function PreviewDeviceToggles() {
         }}
       />
 
+      <div
+        style={{
+          width: 1,
+          height: 14,
+          background: "#e4e4e7",
+          margin: "0 4px",
+          flexShrink: 0,
+        }}
+      />
+
       {/* Device Toggles Inside the Address Bar */}
-        <div style={{ display: "flex", gap: 2, alignItems: "center", marginRight: 4 }}>
+      <div
+        style={{ display: "flex", gap: 2, alignItems: "center", flexShrink: 0 }}
+      >
         <button
           onClick={() => setDeviceMode("desktop")}
           style={{
@@ -221,21 +230,30 @@ function PreviewDeviceToggles() {
           height: 14,
           background: "#e4e4e7",
           margin: "0 4px",
+          flexShrink: 0,
         }}
       />
 
-        {displayUrl && (
+      {displayUrl ? (
         <a
           href={displayUrl}
           target="_blank"
           rel="noreferrer"
           title="Open preview in new tab"
-            style={{ color: "#71717a", display: "flex", padding: "4px" }}
+          style={{
+            color: "#71717a",
+            display: "flex",
+            padding: "4px",
+            flexShrink: 0,
+          }}
         >
           <ExternalLink size={14} />
         </a>
-        )}
+      ) : (
+        <div style={{ padding: "4px", opacity: 0.3, flexShrink: 0 }}>
+          <ExternalLink size={14} />
         </div>
+      )}
     </div>
   );
 }