fixing tables

Author: TeaByte

app/browse.tsx

@@ -53,7 +53,7 @@ export default function Browse(props: BrowseProps) {
           </Select>
         )}
       </div>
-      <div className="mt-3 h-[420px] overflow-auto">
+      <div className="mt-2 h-[420px] overflow-auto">
         {selectedTable && records[selectedTable] && (
           <Table>
             <TableHeader>
@@ -70,8 +70,11 @@ export default function Browse(props: BrowseProps) {
                 <TableRow key={rowIndex}>
                   {Object.keys(records[selectedTable]).map(
                     (column, columnIndex) => (
-                      <TableCell key={columnIndex}>
-                        {records[selectedTable][column][rowIndex]}
+                      <TableCell
+                        key={columnIndex}
+                        className="max-w-[150px] truncate hover:max-w-full"
+                      >
+                        <span>{records[selectedTable][column][rowIndex]}</span>
                       </TableCell>
                     )
                   )}

app/execute.tsx

@@ -56,21 +56,22 @@ export default function ExecuteSQL({ table }: { table: string }) {
         {typeof result === "string" ? (
           <p>{result}</p>
         ) : result instanceof Array ? (
-          <Table className="table-auto">
+          <Table>
             <TableHeader>
               <TableRow>
                 {Object.keys(result[0]).map((key) => (
-                  <TableHead key={key} className="border px-4 py-2">
-                    {key}
-                  </TableHead>
+                  <TableHead key={key}>{key}</TableHead>
                 ))}
               </TableRow>
             </TableHeader>
             <TableBody>
               {result.map((row, index) => (
                 <TableRow key={index}>
                   {Object.values(row).map((value, index) => (
-                    <TableCell key={index} className="border px-4 py-2">
+                    <TableCell
+                      key={index}
+                      className="max-w-[150px] truncate hover:max-w-full"
+                    >
                       {value}
                     </TableCell>
                   ))}