fix: pagination and column width

frontend/src/component/common/Table/PaginatedTable/PaginatedTable.tsx

@@ -9,12 +9,15 @@ import { TableCell } from '../TableCell/TableCell';
 import { CellSortable } from '../SortableTableHeader/CellSortable/CellSortable';
 import { StickyPaginationBar } from 'component/common/Table/StickyPaginationBar/StickyPaginationBar';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { styled } from '@mui/material';
 
 const HeaderCell = <T extends object>(header: Header<T, unknown>) => {
     const column = header.column;
     const isDesc = column.getIsSorted() === 'desc';
     const align = column.columnDef.meta?.align || undefined;
     const width = column.columnDef.meta?.width || undefined;
+    const fixedWidth = width && typeof width === 'number' ? width : undefined;
+    const content = column.columnDef.header;
 
     return (
         <CellSortable
@@ -28,15 +31,22 @@ const HeaderCell = <T extends object>(header: Header<T, unknown>) => {
                 paddingTop: 0,
                 paddingBottom: 0,
                 width,
+                maxWidth: fixedWidth,
+                minWidth: fixedWidth,
             }}
+            ariaTitle={typeof content === 'string' ? content : undefined}
         >
             {header.isPlaceholder
                 ? null
-                : flexRender(column.columnDef.header, header.getContext())}
+                : flexRender(content, header.getContext())}
         </CellSortable>
     );
 };
 
+const TableContainer = styled('div')(({ theme }) => ({
+    overflowX: 'auto',
+}));
+
 /**
  * Use with react-table v8
  */
@@ -51,6 +61,7 @@ export const PaginatedTable = <T extends object>({
 
     return (
         <>
+            <TableContainer>
                 <Table>
                     <TableHead>
                         {tableInstance.getHeaderGroups().map((headerGroup) => (
@@ -87,6 +98,7 @@ export const PaginatedTable = <T extends object>({
                         ))}
                     </TableBody>
                 </Table>
+            </TableContainer>
             <ConditionallyRender
                 condition={tableInstance.getRowModel().rows.length > 0}
                 show={

frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx

@@ -91,7 +91,6 @@ export const CellSortable: FC<ICellSortableProps> = ({
     }, [align]);
 
     useEffect(() => {
-        const updateTitle = () => {
         const newTitle =
             ariaTitle &&
             ref.current &&
@@ -102,10 +101,7 @@ export const CellSortable: FC<ICellSortableProps> = ({
         if (newTitle !== title) {
             setTitle(newTitle);
         }
-        };
+    }, [setTitle, ariaTitle]);
-
-        updateTitle();
-    }, [setTitle, ariaTitle]); // eslint-disable-line react-hooks/exhaustive-deps
 
     return (
         <StyledTableCell

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/PaginatedProjectFeatureToggles.tsx

@@ -251,7 +251,7 @@ export const PaginatedProjectFeatureToggles = ({
                             header: name,
                             meta: {
                                 align: 'center',
-                                width: '1%',
+                                width: 90,
                             },
                             cell: ({ getValue }) => {
                                 const {
@@ -439,6 +439,8 @@ export const PaginatedProjectFeatureToggles = ({
                         }
                     />
                 }
+                bodyClass='noop'
+                style={{ cursor: 'inherit' }}
             >
                 <div
                     ref={bodyLoadingRef}
@@ -461,7 +463,7 @@ export const PaginatedProjectFeatureToggles = ({
                     <ConditionallyRender
                         condition={featuresExportImport && !loading}
                         show={
-                            // FIXME: export only selected rows?
+                            // TODO: `export all` backend
                             <ExportDialog
                                 showExportDialog={showExportDialog}
                                 data={data}

frontend/src/component/project/Project/ProjectOverview.tsx

@@ -39,7 +39,7 @@ const StyledContentContainer = styled(Box)(({ theme }) => ({
 
 const PaginatedProjectOverview: FC<{
     storageKey?: string;
-}> = ({ storageKey = 'project-overview' }) => {
+}> = ({ storageKey = 'project-overview-v2' }) => {
     const projectId = useRequiredPathParam('projectId');
     const { project } = useProjectOverview(projectId, {
         refreshInterval,