design(preview): align Preview and Dashboard buttons next to Publish button on the right

This commit is contained in:
2026-06-12 11:16:51 -07:00
parent 7305c2a57c
commit 32aaf9b6ab

View File

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