fix(logs): remove redundant top page header to maximize vertical terminal space

This commit is contained in:
2026-06-14 14:48:51 -07:00
parent 6578a45332
commit d3b3bc11d9

View File

@@ -107,13 +107,6 @@ export default function LogsPage() {
minHeight: 0, minHeight: 0,
}} }}
> >
<div style={{ padding: "20px 24px" }}>
<PageHeader
title="Server Logs"
subtitle="Container stdout/stderr for your deployed apps."
/>
</div>
{loading && !anatomy ? ( {loading && !anatomy ? (
<div <div
style={{ style={{
@@ -141,7 +134,6 @@ export default function LogsPage() {
display: "flex", display: "flex",
flex: 1, flex: 1,
minHeight: 0, minHeight: 0,
borderTop: `1px solid ${THEME.borderSoft}`,
}} }}
> >
{/* App Picker Column */} {/* App Picker Column */}
@@ -151,33 +143,68 @@ export default function LogsPage() {
flexShrink: 0, flexShrink: 0,
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
gap: 8,
borderRight: `1px solid ${THEME.borderSoft}`, borderRight: `1px solid ${THEME.borderSoft}`,
padding: "20px",
overflowY: "auto", overflowY: "auto",
}} }}
> >
{live.map((app) => ( <header
<button style={{
key={app.uuid} display: "flex",
onClick={() => setActiveUuid(app.uuid)} alignItems: "center",
justifyContent: "space-between",
padding: "10px 20px",
position: "sticky",
top: 0,
background: THEME.cardBg,
zIndex: 10,
height: "41px",
boxSizing: "border-box",
borderTopLeftRadius: THEME.radius,
}}
>
<h3
style={{ style={{
textAlign: "left", fontSize: "0.95rem",
padding: "10px 14px", fontWeight: 600,
background: color: THEME.ink,
activeUuid === app.uuid ? THEME.subtleBg : THEME.cardBg, margin: 0,
border: `1px solid ${activeUuid === app.uuid ? THEME.border : "transparent"}`,
borderRadius: THEME.radiusSm,
cursor: "pointer",
fontSize: "0.875rem",
fontWeight: 500,
color: activeUuid === app.uuid ? THEME.ink : THEME.mid,
transition: "all 0.15s ease",
}} }}
> >
{app.name} Apps
</button> </h3>
))} </header>
<div
style={{
display: "flex",
flexDirection: "column",
gap: 4,
padding: "0 20px 20px 20px",
}}
>
{live.map((app) => (
<button
key={app.uuid}
onClick={() => setActiveUuid(app.uuid)}
style={{
textAlign: "left",
padding: "10px 14px",
background:
activeUuid === app.uuid
? THEME.subtleBg
: "transparent",
border: "1px solid transparent",
borderRadius: THEME.radiusSm,
cursor: "pointer",
fontSize: "0.875rem",
fontWeight: activeUuid === app.uuid ? 500 : 400,
color: activeUuid === app.uuid ? THEME.ink : THEME.mid,
transition: "all 0.1s ease",
}}
>
{app.name}
</button>
))}
</div>
</div> </div>
{/* Log Viewer Column */} {/* Log Viewer Column */}
@@ -195,18 +222,18 @@ export default function LogsPage() {
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
padding: "12px 20px", padding: "10px 16px",
background: THEME.subtleBg, background: THEME.subtleBg,
borderBottom: `1px solid ${THEME.borderSoft}`, borderBottom: `1px solid ${THEME.borderSoft}`,
height: "53px", height: "41px",
boxSizing: "border-box", boxSizing: "border-box",
}} }}
> >
<span <span
style={{ style={{
fontSize: "0.95rem", fontSize: "0.85rem",
fontWeight: 600, fontWeight: 500,
color: THEME.ink, color: THEME.mid,
}} }}
> >
{live.find((a) => a.uuid === activeUuid)?.name ?? "Logs"} {live.find((a) => a.uuid === activeUuid)?.name ?? "Logs"}
@@ -214,13 +241,14 @@ export default function LogsPage() {
<SecondaryButton <SecondaryButton
icon={ icon={
logsLoading ? ( logsLoading ? (
<Loader2 size={14} className="animate-spin" /> <Loader2 size={13} className="animate-spin" />
) : ( ) : (
<RefreshCw size={14} /> <RefreshCw size={13} />
) )
} }
onClick={() => activeUuid && fetchLogs(activeUuid)} onClick={() => activeUuid && fetchLogs(activeUuid)}
disabled={logsLoading} disabled={logsLoading}
style={{ padding: "4px 8px", fontSize: "0.75rem" }}
> >
Refresh Refresh
</SecondaryButton> </SecondaryButton>