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

fix(logs): fix terminal layout

Browse Source
This commit is contained in:
mawkone
2026-06-14 12:44:19 -07:00
parent 7e67e480bb
commit 4c0754de33
2 changed files with 39 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
vibn-frontend/app/[workspace]/project/[projectId]/(home)/logs/page.tsx
View File

@@ -153,41 +153,42 @@ export default function LogsPage() {
position: "relative",
}}
>
<Terminal
sequence={false}
className="w-full max-w-none h-full max-h-none border-gray-200 dark:border-gray-800 shadow-sm"
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 16,
}}
>
<div
<span
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 16,
fontSize: "0.85rem",
fontWeight: 600,
color: THEME.ink,
}}
>
<span
style={{
fontSize: "0.85rem",
fontWeight: 600,
color: "#fff",
}}
>
{live.find((a) => a.uuid === activeUuid)?.name ?? "Logs"}
</span>
<SecondaryButton
icon={
logsLoading ? (
<Loader2 size={14} className="animate-spin" />
) : (
<RefreshCw size={14} />
)
}
onClick={() => activeUuid && fetchLogs(activeUuid)}
disabled={logsLoading}
>
Refresh
</SecondaryButton>
</div>
{live.find((a) => a.uuid === activeUuid)?.name ?? "Logs"}
</span>
<SecondaryButton
icon={
logsLoading ? (
<Loader2 size={14} className="animate-spin" />
) : (
<RefreshCw size={14} />
)
}
onClick={() => activeUuid && fetchLogs(activeUuid)}
disabled={logsLoading}
>
Refresh
</SecondaryButton>
</div>
<Terminal
sequence={false}
className="w-full max-w-none shadow-sm flex-1"
>
<div
style={{
color: "#e5e5e5",

14
vibn-frontend/components/ui/terminal.tsx
View File

@@ -275,19 +275,19 @@ export const Terminal = ({
<div
ref={containerRef}
className={cn(
"z-0 h-full max-h-100 w-full max-w-lg rounded-xl border border-[#27272a] bg-[#0a0a0a] text-white",
"z-0 h-full w-full rounded-xl border border-[#27272a] bg-[#0a0a0a] text-white flex flex-col overflow-hidden",
className,
)}
>
<div className="flex flex-col gap-y-2 border-b border-[#27272a] p-4">
<div className="flex flex-col gap-y-2 border-b border-[#27272a] p-4 shrink-0">
<div className="flex flex-row gap-x-2">
<div className="h-2 w-2 rounded-full bg-red-500"></div>
<div className="h-2 w-2 rounded-full bg-yellow-500"></div>
<div className="h-2 w-2 rounded-full bg-green-500"></div>
<div className="h-3 w-3 rounded-full bg-[#ff5f56]"></div>
<div className="h-3 w-3 rounded-full bg-[#ffbd2e]"></div>
<div className="h-3 w-3 rounded-full bg-[#27c93f]"></div>
</div>
</div>
<pre className="p-4">
<code className="grid gap-y-1 overflow-auto">{wrappedChildren}</code>
<pre className="p-4 flex-1 overflow-auto m-0">
<code className="grid gap-y-1">{wrappedChildren}</code>
</pre>
</div>
);