mark/vibn-agent-runner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design(preview): consolidate desktop/mobile toggles inside the URL bar for a cleaner layout

Browse Source
This commit is contained in:
mawkone
2026-06-12 11:48:33 -07:00
parent f510848173
commit a52557f35b
1 changed files with 53 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
vibn-frontend/components/project/project-icon-rail.tsx
View File

@@ -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,