From 17eb1292559cd0785048f32f6a839ad9b5ea6ceb Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Thu, 2 Dec 2021 14:59:10 +0800
Subject: [PATCH] added more styling for DataGrid and LogSelection

---
 studio/components/ui/Logs/LogSelection.tsx |  2 +-
 studio/components/ui/Logs/LogTable.tsx     | 27 ++++++++++------------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/studio/components/ui/Logs/LogSelection.tsx b/studio/components/ui/Logs/LogSelection.tsx
index 21baa8c608f..a004510568a 100644
--- a/studio/components/ui/Logs/LogSelection.tsx
+++ b/studio/components/ui/Logs/LogSelection.tsx
@@ -22,7 +22,7 @@ const LogSelection = ({ log, onClose }: Props) => (
     }
   >
     <div className="p-4 h-full flex-col">
-    <Typography.Text code className="block" small>{log.event_message} </Typography.Text>
+      <Typography.Text code className="block w-full overflow-x-auto" small>{log.event_message} </Typography.Text>
       <Input.TextArea label="Metadata" className="font-mono mt-4" size="tiny" rows={25} disabled value={JSON.stringify(log.metadata, null, 2)} />
     </div>
 
diff --git a/studio/components/ui/Logs/LogTable.tsx b/studio/components/ui/Logs/LogTable.tsx
index 71d687a9e64..abd9f08be42 100644
--- a/studio/components/ui/Logs/LogTable.tsx
+++ b/studio/components/ui/Logs/LogTable.tsx
@@ -57,22 +57,19 @@ const LogTable = ({ data }: Props) => {
   if (!data) return null
 
   return (<section className="flex flex-row gap-x-4">
-    <div className="flex-grow w-2/3">
-      <DataGrid
-        onSelectedCellChange={({ idx, rowIdx }) => setFocusedLog(data[rowIdx])}
-        noRowsFallback={<Typography.Text className="text-center">No data returned from query</Typography.Text>}
-        columns={columns as any}
-        rowClass={r => `${r.id === focusedLog?.id ? "bg-green-800" : "cursor-pointer"}`}
-        rows={data}
-        rowKeyGetter={r => r.id}
-        onRowClick={r => {
-          const log = logMap[r.id]
-          setFocusedLog(logMap[r.id])
-        }}
-      />
-    </div>
+    <DataGrid
+      style={{ height: "unset", minHeight: "75vh" }}
+      className="flex-grow flex-1"
+      onSelectedCellChange={({ idx, rowIdx }) => setFocusedLog(data[rowIdx])}
+      noRowsFallback={<Typography.Text className="text-center">No data returned from query</Typography.Text>}
+      columns={columns as any}
+      rowClass={r => `${r.id === focusedLog?.id ? "bg-green-800" : "cursor-pointer"}`}
+      rows={data}
+      rowKeyGetter={r => r.id}
+      onRowClick={r => setFocusedLog(logMap[r.id])}
+    />
     {focusedLog && (
-      <div className="sticky top-0 w-1/3">
+      <div className="w-2/5">
         <LogSelection onClose={() => setFocusedLog(null)} log={focusedLog} />
       </div>
     )}