From ce1e9621287d183da94c09bb34b2d2f8ef753244 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 22 Oct 2025 14:58:21 +0200
Subject: [PATCH] Assigns more reasonable sizes and scaling to the change
 requests tabel.

---
 .../changeRequest/ChangeRequests/ChangeRequests.tsx   | 11 ++++++-----
 .../ChangeRequests/GlobalChangeRequestTitleCell.tsx   |  2 +-
 .../ChangeRequestsTabs/FeaturesCell.tsx               |  5 ++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequests/ChangeRequests.tsx b/frontend/src/component/changeRequest/ChangeRequests/ChangeRequests.tsx
index 6c5a884227..ebcf6b8392 100644
--- a/frontend/src/component/changeRequest/ChangeRequests/ChangeRequests.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequests/ChangeRequests.tsx
@@ -45,6 +45,7 @@ const StyledPaginatedTable = styled(
 
     td: {
         verticalAlign: 'top',
+        maxWidth: '250px',
     },
 }));
 
@@ -105,7 +106,7 @@ const ChangeRequestsInner = () => {
             columnHelper.accessor('id', {
                 id: 'Title',
                 header: 'Title',
-                meta: { width: '300px' },
+                meta: { width: '35%' },
                 cell: GlobalChangeRequestTitleCell,
             }),
             columnHelper.accessor('features', {
@@ -134,20 +135,20 @@ const ChangeRequestsInner = () => {
             columnHelper.accessor('createdBy', {
                 id: 'By',
                 header: 'By',
-                meta: { width: '180px', align: 'left' },
+                meta: { width: '10%' },
                 enableSorting: false,
                 cell: ({ getValue }) => <AvatarCell value={getValue()} />,
             }),
             columnHelper.accessor('createdAt', {
                 id: 'Submitted',
                 header: 'Submitted',
-                meta: { width: '100px' },
+                meta: { width: '5%' },
                 cell: ({ getValue }) => <TimeAgoCell value={getValue()} />,
             }),
             columnHelper.accessor('environment', {
                 id: 'Environment',
                 header: 'Environment',
-                meta: { width: '100px' },
+                meta: { width: '10%' },
                 cell: ({ getValue }) => (
                     <HighlightCell maxTitleLines={1} value={getValue()} />
                 ),
@@ -155,7 +156,7 @@ const ChangeRequestsInner = () => {
             columnHelper.accessor('state', {
                 id: 'Status',
                 header: 'Status',
-                meta: { width: '170px' },
+                meta: { width: '10%' },
                 cell: ({ getValue, row }) => (
                     <ChangeRequestStatusCell value={getValue()} row={row} />
                 ),
diff --git a/frontend/src/component/changeRequest/ChangeRequests/GlobalChangeRequestTitleCell.tsx b/frontend/src/component/changeRequest/ChangeRequests/GlobalChangeRequestTitleCell.tsx
index af356ded93..b065fb97da 100644
--- a/frontend/src/component/changeRequest/ChangeRequests/GlobalChangeRequestTitleCell.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequests/GlobalChangeRequestTitleCell.tsx
@@ -57,7 +57,7 @@ export const GlobalChangeRequestTitleCell = ({
     const crPath = `${projectPath}/change-requests/${id}`;
 
     return (
-        <TextCell sx={{ minWidth: '300px' }}>
+        <TextCell>
             <LinkContainer>
                 <Truncator title={projectName}>
                     <BaseLink to={projectPath}>{projectName}</BaseLink>
diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/FeaturesCell.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/FeaturesCell.tsx
index 57946fe545..14482abfe4 100644
--- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/FeaturesCell.tsx
+++ b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/FeaturesCell.tsx
@@ -1,16 +1,15 @@
 import { Box, styled } from '@mui/material';
 import { Link } from 'react-router-dom';
-import type { VFC } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
 import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import { Highlighter } from 'component/common/Highlighter/Highlighter';
 import { Truncator } from 'component/common/Truncator/Truncator';
+import type { FC } from 'react';
 
 const StyledBox = styled(Box)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
-    width: '300px',
     padding: theme.spacing(1, 0, 1, 2),
 }));
 
@@ -41,7 +40,7 @@ interface FeaturesCellProps {
     project: string;
 }
 
-export const FeaturesCell: VFC<FeaturesCellProps> = ({ value, project }) => {
+export const FeaturesCell: FC<FeaturesCellProps> = ({ value, project }) => {
     const { searchQuery } = useSearchHighlightContext();
     const featureNames = value?.map((feature: any) => feature.name);
     return (