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