DSE-45483: Fix for Datasets Table REndering

Author: Keivan Vosoughi

app/client/src/pages/Home/DatasetsTab.tsx

@@ -21,6 +21,7 @@ const { Search } = Input;
 const Container = styled.div`
   background-color: #ffffff;
   padding: 1rem;
+  overflow-x: auto;
 `;
 
 const StyledTable = styled(Table)`
@@ -109,53 +110,56 @@ const DatasetsTab: React.FC = () => {
             key: 'display_name',
             title: 'Display Name',
             dataIndex: 'display_name',
-            sorter: sortItemsByKey('display_name'),
+            width: 140,
+            sorter: sortItemsByKey('display_name')
         }, {
             key: 'generate_file_name',
             title: 'Dataset Name',
             dataIndex: 'generate_file_name',
-            sorter: sortItemsByKey('generate_file_name'),
             width: 250,
+            sorter: sortItemsByKey('generate_file_name'),
             render: (generate_file_name) => <Tooltip title={generate_file_name}><StyledParagraph style={{ width: 200, marginBottom: 0 }} ellipsis={{ rows: 1 }}>{generate_file_name}</StyledParagraph></Tooltip>
         }, {
             key: 'model_id',
             title: 'Model',
             dataIndex: 'model_id',
-            sorter: sortItemsByKey('model_id'),
             width: 250,
+            sorter: sortItemsByKey('model_id'),
             render: (modelId) => <Tooltip title={modelId}><StyledParagraph style={{ width: 200, marginBottom: 0 }} ellipsis={{ rows: 1 }}>{modelId}</StyledParagraph></Tooltip>
         }, {
             key: 'num_questions',
             title: 'Questions Per Topic',
             dataIndex: 'num_questions',
+            width: 120,
             align: 'center',
-            sorter: sortItemsByKey('num_questions'),
-            width: 120
+            sorter: sortItemsByKey('num_questions')
         }, 
         {
             key: 'total_count',
             title: 'Total Count',
             dataIndex: 'total_count',
+            width: 80,
             align: 'center',
-            sorter: sortItemsByKey('total_count'),
-            width: 80
+            sorter: sortItemsByKey('total_count')
         }, {
             key: 'use_case',
             title: 'Use Case',
             dataIndex: 'use_case',
+            width: 120,
             sorter: sortItemsByKey('use_case'),
             render: (useCase) => TRANSLATIONS[useCase]
         }, {
             key: 'timestamp',
             title: 'Creation Time',
             dataIndex: 'timestamp',
             defaultSortOrder: 'descend',
+            width: 120,
             sorter: sortItemsByKey('timestamp'),
             render: (timestamp) => <>{timestamp == null ? 'N/A' : <DateTime dateTime={timestamp}/>}</>
         }, {
             key: '7',
             title: 'Actions',
-            width: 150,
+            width: 100,
             render: (row: Dataset) => (
                 <DatasetActions dataset={row} refetch={refetch} setToggleDatasetExportModal={setToggleDatasetExportModal}/>
             )

app/client/src/pages/Home/EvaluationsTab.tsx

@@ -21,6 +21,7 @@ const { Search } = Input;
 const Container = styled.div`
   background-color: #ffffff;
   padding: 1rem;
+  overflow-x: auto;
 `;
 
 const StyledTable = styled(Table)`
@@ -89,34 +90,40 @@ const EvaluationsTab: React.FC = () => {
               key: 'display_name',
               title: 'Display Name',
               dataIndex: 'display_name',
+              width: 150,
               sorter: sortItemsByKey('display_name'),
         }, {
               key: 'model_id',
               title: 'Model ID',
               dataIndex: 'model_id',
+              width: 150,
               sorter: sortItemsByKey('model_id'),
         }, {
               key: 'average_score',
               title: 'Average Score',
               dataIndex: 'average_score',
+              width: 80,
               render: (average_score) => <Badge count={average_score} color={getColorCode(average_score)} showZero />,
               sorter: sortItemsByKey('average_score'),
         },{
               key: 'use_case',
               title: 'Use Case',
               dataIndex: 'use_case',
+              width: 180,
               sorter: sortItemsByKey('use_case'),
               render: (useCase) => <StyledParagraph style={{ width: 200, marginBottom: 0 }} ellipsis={{ rows: 1 }}>{TRANSLATIONS[useCase]}</StyledParagraph>
         }, {
               key: 'timestamp',
               title: 'Create Time',
               dataIndex: 'timestamp',
+              width: 140,
               sorter: sortItemsByKey('timestamp'),
               render: (timestamp) => <DateTime dateTime={timestamp}></DateTime>
 
         }, {
             key: 'action',
             title: 'Actions',
+            width: 100,
             render: (row: Evaluation) => 
               <EvaluateActions evaluation={row} refetch={refetch} />
 

app/client/src/pages/Home/hooks.ts

@@ -242,4 +242,4 @@ export const useUpgradeSynthesisStudio = () => {
     isError: mutation.isError,
     data: mutation.data
   };
-}
+}