design(preview): move refresh button inside the address bar for a cleaner layout

This commit is contained in:
2026-06-12 11:46:14 -07:00
parent 308d7cd5e1
commit f510848173

View File

@@ -112,7 +112,7 @@ function PreviewDeviceToggles() {
gap: 6,
background: "#fafafa",
border: "1px solid #e4e4e7",
padding: "4px 12px",
padding: "4px 8px",
borderRadius: 8,
height: 34,
flex: 1, // Let the URL bar grow to fill the header space
@@ -121,7 +121,41 @@ function PreviewDeviceToggles() {
fontSize: "0.75rem",
}}
>
<span style={{ opacity: 0.6 }}>🌐</span>
<button
onClick={triggerRefresh}
title="Reload Preview"
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: 24,
height: 24,
borderRadius: 4,
border: "none",
cursor: "pointer",
transition: "all 0.15s",
background: "transparent",
color: "#71717a",
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = "#e4e4e7";
e.currentTarget.style.color = "#18181b";
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = "transparent";
e.currentTarget.style.color = "#71717a";
}}
>
<RotateCw size={12} />
</button>
<div
style={{
width: 1,
height: 14,
background: "#e4e4e7",
margin: "0 2px",
}}
/>
<input
type="text"
value={displayUrl}
@@ -135,6 +169,7 @@ function PreviewDeviceToggles() {
color: "#18181b",
fontSize: "0.75rem",
textOverflow: "ellipsis",
paddingLeft: 4,
}}
/>
{displayUrl && (
@@ -160,39 +195,6 @@ function PreviewDeviceToggles() {
border: "1px solid #e4e4e7",
}}
>
<button
onClick={triggerRefresh}
title="Reload Preview"
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: 28,
height: 26,
borderRadius: 6,
border: "none",
cursor: "pointer",
transition: "all 0.15s",
background: "transparent",
color: "#71717a",
marginRight: 4,
}}
onMouseEnter={(e) => (e.currentTarget.style.color = "#18181b")}
onMouseLeave={(e) => (e.currentTarget.style.color = "#71717a")}
>
<RotateCw size={14} />
</button>
<div
style={{
width: 1,
height: 16,
background: "#e4e4e7",
alignSelf: "center",
marginRight: 4,
}}
/>
<button
onClick={() => setDeviceMode("desktop")}
style={{