chore: align text to cell top (#10837)

First part of UI refactoring for the change requests table: align
content to the top of the cell to facilitate scanning the table.

To facilitate this, I've mad the paginated table stylable by adding a
class name.

Before:
<img width="1810" height="1500" alt="image"
src="https://github.com/user-attachments/assets/febc9471-5d57-4afa-a9b0-0d22044fcd92"
/>

After:
<img width="1809" height="1326" alt="image"
src="https://github.com/user-attachments/assets/e6aea2e9-0f1d-42f9-bd09-ad7317acbd4e"
/>

frontend/src/component/changeRequest/ChangeRequests/ChangeRequests.tsx

@@ -1,5 +1,5 @@
 import { useId, useMemo } from 'react';
-import { Box } from '@mui/material';
+import { Box, styled } from '@mui/material';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { PaginatedTable, TablePlaceholder } from 'component/common/Table';
@@ -36,6 +36,14 @@ import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser.js';
 
 const columnHelper = createColumnHelper<ChangeRequestSearchItemSchema>();
 
+const StyledPaginatedTable = styled(
+    PaginatedTable<ChangeRequestSearchItemSchema>,
+)(() => ({
+    td: {
+        verticalAlign: 'top',
+    },
+}));
+
 const ChangeRequestsInner = () => {
     const { user } = useAuthUser();
     const urlParams = new URLSearchParams(window.location.search);
@@ -204,7 +212,10 @@ const ChangeRequestsInner = () => {
                 className={themeStyles.fullwidth}
                 ref={bodyLoadingRef}
             >
-                <PaginatedTable tableInstance={table} totalItems={total} />
+                <StyledPaginatedTable
+                    tableInstance={table}
+                    totalItems={total}
+                />
                 {data.length === 0 && !loading ? (
                     <Box sx={(theme) => ({ padding: theme.spacing(1, 3, 3) })}>
                         <TablePlaceholder>

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

@@ -53,9 +53,11 @@ const TableContainer = styled('div')(({ theme }) => ({
  * Use with react-table v8
  */
 export const PaginatedTable = <T extends object>({
+    className,
     totalItems,
     tableInstance,
 }: {
+    className?: string;
     tableInstance: TableType<T>;
     totalItems?: number;
 }) => {
@@ -76,7 +78,7 @@ export const PaginatedTable = <T extends object>({
     return (
         <>
             <TableContainer ref={tableRef}>
-                <Table>
+                <Table className={className}>
                     <TableHead>
                         {tableInstance.getHeaderGroups().map((headerGroup) => (
                             <TableRow key={headerGroup.id}>