From 4c0754de337c1810a25bf76f831c3b024755808a Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Sun, 14 Jun 2026 12:44:19 -0700
Subject: [PATCH] fix(logs): fix terminal layout

---
 .../project/[projectId]/(home)/logs/page.tsx  | 63 ++++++++++---------
 vibn-frontend/components/ui/terminal.tsx      | 14 ++---
 2 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/logs/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/logs/page.tsx
index 33dc38bf..a53b8437 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/logs/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/logs/page.tsx
@@ -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",
diff --git a/vibn-frontend/components/ui/terminal.tsx b/vibn-frontend/components/ui/terminal.tsx
index 2e5d0f2a..0cb2632f 100644
--- a/vibn-frontend/components/ui/terminal.tsx
+++ b/vibn-frontend/components/ui/terminal.tsx
@@ -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>
   );