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

design(preview): match header layout order to Base44 reference (URL bar on left, device toggles on right)

Browse Source
This commit is contained in:
mawkone
2026-06-12 11:43:25 -07:00
parent 730154c2f9
commit c337655dde
1 changed files with 45 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -105,6 +105,51 @@ function PreviewDeviceToggles() {
<div
style={{ display: "flex", alignItems: "center", gap: 8, width: "100%" }}
>
<div
style={{
display: "flex",
alignItems: "center",
gap: 6,
background: "#fafafa",
border: "1px solid #e4e4e7",
padding: "4px 12px",
borderRadius: 8,
height: 34,
flex: 1, // Let the URL bar grow to fill the header space
minWidth: 320,
color: "#71717a",
fontSize: "0.75rem",
}}
>
<span style={{ opacity: 0.6 }}>🌐</span>
<input
type="text"
value={displayUrl}
readOnly
placeholder="No dev server running..."
style={{
background: "transparent",
border: "none",
outline: "none",
width: "100%",
color: "#18181b",
fontSize: "0.75rem",
textOverflow: "ellipsis",
}}
/>
{displayUrl && (
<a
href={displayUrl}
target="_blank"
rel="noreferrer"
title="Open preview in new tab"
style={{ color: "#71717a", display: "flex", marginLeft: 4 }}
>
<ExternalLink size={14} />
</a>
)}
</div>
<div
style={{
display: "flex",
@@ -193,51 +238,6 @@ function PreviewDeviceToggles() {
Mobile
</button>
</div>
<div
style={{
display: "flex",
alignItems: "center",
gap: 6,
background: "#fafafa",
border: "1px solid #e4e4e7",
padding: "4px 12px",
borderRadius: 8,
height: 34,
flex: 1, // Let the URL bar grow to fill the header space
minWidth: 320,
color: "#71717a",
fontSize: "0.75rem",
}}
>
<span style={{ opacity: 0.6 }}>🌐</span>
<input
type="text"
value={displayUrl}
readOnly
placeholder="No dev server running..."
style={{
background: "transparent",
border: "none",
outline: "none",
width: "100%",
color: "#18181b",
fontSize: "0.75rem",
textOverflow: "ellipsis",
}}
/>
{displayUrl && (
<a
href={displayUrl}
target="_blank"
rel="noreferrer"
title="Open preview in new tab"
style={{ color: "#71717a", display: "flex", marginLeft: 4 }}
>
<ExternalLink size={14} />
</a>
)}
</div>
</div>
);
}