From 7215e6bdfbe2bddcc95287ea25684471cbe6ec7b Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 6 Nov 2025 13:05:06 +0100
Subject: [PATCH] Chore: copy change request table improvements to project CR
 tables (#10920)

Ports some of the most significant updates from the new global change
request table to the old change request table.

Notably:
- Truncate the title if it's long
- Give more space to the title (especially useful because of the
truncation)
- Vertically align cell content to the top (to make it easy to scan in a
single row)

Before:

Without title truncation (extreme case)
<img width="4612" height="11744" alt="image"
src="https://github.com/user-attachments/assets/60511795-f113-41d1-9073-4c7752a82875"
/>

Column widths:
<img width="1496" height="212" alt="image"
src="https://github.com/user-attachments/assets/f92c3d2d-1c34-4de9-996c-039160ad9766"
/>
<img width="919" height="290" alt="image"
src="https://github.com/user-attachments/assets/babce5d3-a92d-4e5d-822a-6123a3a8e698"
/>



After:
With title truncation:
<img width="1533" height="617" alt="image"
src="https://github.com/user-attachments/assets/4ebfb587-b646-49f2-a087-1b7347a3bb26"
/>

Column widths:
<img width="1496" height="305" alt="image"
src="https://github.com/user-attachments/assets/d03be365-7df7-4c62-a3b7-d55e115fd6cb"
/>
<img width="933" height="304" alt="image"
src="https://github.com/user-attachments/assets/7cd5df64-5ee5-4a1e-a065-00e7a853ab16"
/>
---
 .../ChangeRequestTitleCell.tsx                |  7 +++++-
 .../ChangeRequestsTabs/ChangeRequestsTabs.tsx | 22 ++++++++++++++-----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell.tsx
index def9384e0b..74770ecea3 100644
--- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell.tsx
+++ b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestTitleCell.tsx
@@ -4,6 +4,7 @@ import { Link as RouterLink } from 'react-router-dom';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import { Highlighter } from 'component/common/Highlighter/Highlighter';
+import { Truncator } from 'component/common/Truncator/Truncator';
 
 interface IChangeRequestTitleCellProps {
     value?: any;
@@ -52,7 +53,11 @@ export const ChangeRequestTitleCell = ({
                             },
                         })}
                     >
-                        <Highlighter search={searchQuery}>{title}</Highlighter>
+                        <Truncator title={title}>
+                            <Highlighter search={searchQuery}>
+                                {title}
+                            </Highlighter>
+                        </Truncator>
                     </Link>
                 </Typography>
             </StyledLink>
diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
index fbc100163b..a193133784 100644
--- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
+++ b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
@@ -62,6 +62,17 @@ const ConftigurationLinkBox = styled(Box)(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,
 }));
 
+const StyledTable = styled(Table)(() => ({
+    th: {
+        whiteSpace: 'nowrap',
+    },
+
+    td: {
+        verticalAlign: 'top',
+        maxWidth: '250px',
+    },
+}));
+
 export const ChangeRequestsTabs = ({
     changeRequests = [],
     placeholder,
@@ -122,7 +133,6 @@ export const ChangeRequestsTabs = ({
             {
                 id: 'Title',
                 Header: 'Title',
-                width: 100,
                 canSort: true,
                 accessor: 'title',
                 searchable: true,
@@ -164,7 +174,7 @@ export const ChangeRequestsTabs = ({
             {
                 Header: 'By',
                 accessor: 'createdBy',
-                maxWidth: 180,
+                width: '10%',
                 canSort: false,
                 Cell: AvatarCell,
                 align: 'left',
@@ -177,13 +187,14 @@ export const ChangeRequestsTabs = ({
                 Header: 'Submitted',
                 accessor: 'createdAt',
                 maxWidth: 100,
+                width: '5%',
                 Cell: TimeAgoCell,
             },
             {
                 Header: 'Environment',
                 accessor: 'environment',
                 searchable: true,
-                maxWidth: 100,
+                width: '10%',
                 Cell: HighlightCell,
                 filterName: 'environment',
             },
@@ -192,6 +203,7 @@ export const ChangeRequestsTabs = ({
                 accessor: 'state',
                 searchable: true,
                 maxWidth: '170px',
+                width: '10%',
                 Cell: ChangeRequestStatusCell,
                 filterName: 'status',
             },
@@ -333,7 +345,7 @@ export const ChangeRequestsTabs = ({
                 </Link>
             </ConftigurationLinkBox>
             <SearchHighlightProvider value={getSearchText(searchValue)}>
-                <Table {...getTableProps()}>
+                <StyledTable {...getTableProps()}>
                     <SortableTableHeader headerGroups={headerGroups} />
                     <TableBody {...getTableBodyProps()}>
                         {rows.map((row) => {
@@ -355,7 +367,7 @@ export const ChangeRequestsTabs = ({
                             );
                         })}
                     </TableBody>
-                </Table>
+                </StyledTable>
             </SearchHighlightProvider>
             <ConditionallyRender
                 condition={rows.length === 0}