chore: tweak ui

web/src/components/MachineList.tsx

@@ -182,9 +182,11 @@ export async function callServerPromise<T>(result: Promise<T>) {
       if ((x as { message: string })?.message !== undefined) {
         toast.success((x as { message: string }).message);
       }
+      return x;
     })
     .catch((error) => {
       toast.error(error.message);
+      return null;
     });
 }
 

web/src/components/RunDisplay.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { LiveStatus } from "./LiveStatus";
+import { callServerPromise } from "@/components/MachineList";
 import {
   Dialog,
   DialogContent,
@@ -28,7 +29,7 @@ export function RunDisplay({
         className="appearance-none hover:cursor-pointer"
         onClick={async () => {
           if (view) return;
-          const _view = await getRunsOutputDisplay(run.id);
+          const _view = await callServerPromise(getRunsOutputDisplay(run.id));
           setView(_view);
         }}
       >
@@ -49,7 +50,7 @@ export function RunDisplay({
         {/* <Suspense>
           <RunOutputs run_id={run.id} />
         </Suspense> */}
-        {view}
+        <div className="max-h-96 overflow-y-scroll">{view}</div>
       </DialogContent>
     </Dialog>
   );
@@ -59,6 +60,7 @@ export function OutputRender(props: { run_id: string; filename: string }) {
   if (props.filename.endsWith(".png")) {
     return (
       <img
+        className="max-w-[200px]"
         alt={props.filename}
         src={`/api/view?file=${encodeURIComponent(
           `outputs/runs/${props.run_id}/${props.filename}`

web/src/components/RunOutputs.tsx

@@ -30,7 +30,7 @@ export async function RunOutputs({ run_id }: { run_id: string }) {
       {/* <TableCaption>A list of your recent runs.</TableCaption> */}
       <TableHeader className="bg-background top-0 sticky">
         <TableRow>
-          <TableHead className="w-[100px]">File</TableHead>
+          <TableHead className="w-[200px]">File</TableHead>
           <TableHead className="">Output</TableHead>
         </TableRow>
       </TableHeader>
@@ -42,7 +42,7 @@ export async function RunOutputs({ run_id }: { run_id: string }) {
             return (
               <TableRow key={run.id}>
                 <TableCell>Output</TableCell>
-                <TableCell className="max-h-44">
+                <TableCell className="">
                   <CodeBlock
                     code={JSON.stringify(run.data, null, 2)}
                     lang="json"