enabled scrolling on settings tab

src/renderer/components/Settings/TransformerLabSettings.tsx

@@ -28,6 +28,7 @@ import { EyeIcon, EyeOffIcon, RotateCcwIcon } from 'lucide-react';
 // Import the AIProvidersSettings component.
 import AIProvidersSettings from './AIProvidersSettings';
 import ViewJobsTab from './ViewJobsTab';
+import { alignBox } from '@nivo/core';
 
 const fetcher = (url) => fetch(url).then((res) => res.json());
 
@@ -77,17 +78,48 @@ export default function TransformerLabSettings() {
   }
 
   return (
-    <>
+    <Sheet
+      sx={{
+        width: '100%',
+        height: '100%',
+        overflowY: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
       <Typography level="h1" marginBottom={1}>
         Transformer Lab Settings
       </Typography>
-      <Sheet sx={{ width: '100%', overflowY: 'auto' }}>
-        <Tabs defaultValue={0}>
+      <Sheet
+        sx={{
+          height: '100%',
+          overflowY: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Tabs
+          defaultValue={0}
+          sx={{
+            height: '100%',
+            overflowY: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
           <TabList>
             <Tab>Settings</Tab>
             <Tab>View Jobs</Tab>
           </TabList>
-          <TabPanel value={0}>
+          <TabPanel
+            value={0}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              overflowY: 'auto',
+              alignItems: 'flex-start',
+            }}
+          >
             {canLogInToHuggingFaceIsLoading && <CircularProgress />}
             <Typography level="title-lg" marginBottom={2}>
               Huggingface Credentials:
@@ -213,6 +245,6 @@ export default function TransformerLabSettings() {
           </TabPanel>
         </Tabs>
       </Sheet>
-    </>
+    </Sheet>
   );
 }

src/renderer/components/Settings/ViewJobsTab.tsx

@@ -40,14 +40,19 @@ export default function ViewJobsTab() {
         <Option value="EVAL">Evaluate</Option>
       </Select>
       {showJobsOfType !== 'NONE' && (
-        <Table sx={{ tableLayout: 'auto', overflow: 'scroll' }}>
+        <Table
+          stickyHeader
+          sx={{ width: '100%', tableLayout: 'auto', overflow: 'scroll' }}
+        >
           <thead>
             <tr>
-              <td>Job ID</td>
-              <td>Job Type</td>
-              <td>Job Status</td>
-              <td>Job Progress</td>
-              <td>Job Data</td>
+              <th>Job ID</th>
+              <th>Job Type</th>
+              <th>Job Status</th>
+              <th>Job Progress</th>
+              <th width="400px" style={{ overflow: 'hidden' }}>
+                Job Data
+              </th>
             </tr>
           </thead>
           <tbody>
@@ -57,7 +62,7 @@ export default function ViewJobsTab() {
                 <td>{job.type}</td>
                 <td>{job.status}</td>
                 <td>{job.progress}</td>
-                <td>
+                <td width="400px">
                   <pre>{JSON.stringify(job.job_data, null, 2)}</pre>
                 </td>
               </tr>