From 488d2aee8c1bcd3c295268371b29f91c40cbef44 Mon Sep 17 00:00:00 2001
From: bennykok <itechbenny@gmail.com>
Date: Wed, 31 Jan 2024 21:27:31 +0800
Subject: [PATCH] fix: machine build height

---
 web/src/app/(app)/machines/[machine_id]/page.tsx | 5 ++++-
 web/src/components/LogsViewer.tsx                | 9 +++++++--
 web/src/components/MachineBuildLog.tsx           | 2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/src/app/(app)/machines/[machine_id]/page.tsx b/web/src/app/(app)/machines/[machine_id]/page.tsx
index 22fcbdd..023190a 100644
--- a/web/src/app/(app)/machines/[machine_id]/page.tsx
+++ b/web/src/app/(app)/machines/[machine_id]/page.tsx
@@ -35,7 +35,10 @@ export default async function Page({
             />
           )}
           {machine.status !== "building" && machine.build_log && (
-            <LogsViewer logs={JSON.parse(machine.build_log)} />
+            <LogsViewer
+              logs={JSON.parse(machine.build_log)}
+              className="h-full max-h-[600px]"
+            />
           )}
         </CardContent>
       </Card>
diff --git a/web/src/components/LogsViewer.tsx b/web/src/components/LogsViewer.tsx
index f9e64c1..0be4691 100644
--- a/web/src/components/LogsViewer.tsx
+++ b/web/src/components/LogsViewer.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef } from "react";
+import { cn } from "@/lib/utils";
 import { toast } from "sonner";
 
 export type LogsType = {
@@ -12,7 +13,8 @@ export type LogsType = {
 export function LogsViewer({
   logs,
   hideTimestamp,
-}: { logs: LogsType; hideTimestamp?: boolean }) {
+  className,
+}: { logs: LogsType; hideTimestamp?: boolean; className?: string }) {
   const container = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
@@ -40,7 +42,10 @@ export function LogsViewer({
         }
         container.current = ref;
       }}
-      className="h-full w-full flex flex-col text-xs p-2 overflow-y-scroll whitespace-break-spaces"
+      className={cn(
+        "h-full w-full flex flex-col text-xs p-2 overflow-y-scroll whitespace-break-spaces",
+        className,
+      )}
     >
       {logs.map((x, i) => (
         <div
diff --git a/web/src/components/MachineBuildLog.tsx b/web/src/components/MachineBuildLog.tsx
index c9a4e80..4665ad7 100644
--- a/web/src/components/MachineBuildLog.tsx
+++ b/web/src/components/MachineBuildLog.tsx
@@ -66,7 +66,7 @@ export function MachineBuildLog({
   return (
     <div>
       {connectionStatus}
-      <LogsViewer logs={logs} hideTimestamp />
+      <LogsViewer logs={logs} className="h-full max-h-[600px]" />
 
       <AlertDialog open={finished}>
         <AlertDialogContent>