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

This commit is contained in:
2026-06-12 11:48:33 -07:00
parent f510848173
commit a52557f35b

View File

@@ -172,79 +172,75 @@ function PreviewDeviceToggles() {
paddingLeft: 4, 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 && ( {displayUrl && (
<a <a
href={displayUrl} href={displayUrl}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
title="Open preview in new tab" title="Open preview in new tab"
style={{ color: "#71717a", display: "flex", marginLeft: 4 }} style={{ color: "#71717a", display: "flex", padding: "4px" }}
> >
<ExternalLink size={14} /> <ExternalLink size={14} />
</a> </a>
)} )}
</div> </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> </div>
); );
} }
const bar: React.CSSProperties = { const bar: React.CSSProperties = {
display: "flex",
flexDirection: "row",
alignItems: "center", alignItems: "center",
flex: 1, flex: 1,
minWidth: 0, minWidth: 0,