chore: never wrap other text fields in global change requests table

frontend/src/component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { Badge } from 'component/common/Badge/Badge';
+import { Badge as MuiBadge } from 'component/common/Badge/Badge';
 import AccessTime from '@mui/icons-material/AccessTime';
 import Check from '@mui/icons-material/Check';
 import CircleOutlined from '@mui/icons-material/CircleOutlined';
@@ -12,6 +12,11 @@ import type {
     ScheduledChangeRequest,
     UnscheduledChangeRequest,
 } from '../changeRequest.types';
+import { styled } from '@mui/material';
+
+const Badge = styled(MuiBadge)({
+    whiteSpace: 'nowrap',
+});
 
 export interface IChangeRequestStatusBadgeProps {
     changeRequest:

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

@@ -39,6 +39,10 @@ const columnHelper = createColumnHelper<ChangeRequestSearchItemSchema>();
 const StyledPaginatedTable = styled(
     PaginatedTable<ChangeRequestSearchItemSchema>,
 )(() => ({
+    th: {
+        whiteSpace: 'nowrap',
+    },
+
     td: {
         verticalAlign: 'top',
     },
@@ -98,17 +102,14 @@ const ChangeRequestsInner = () => {
 
     const columns = useMemo(
         () => [
-            columnHelper.accessor('title', {
+            {
                 id: 'Title',
                 header: 'Title',
                 meta: { width: '300px' },
-                cell: ({ getValue, row }) => (
+                cell: ({ row }) => (
-                    <GlobalChangeRequestTitleCell
+                    <GlobalChangeRequestTitleCell {...row.original} />
-                        value={getValue()}
-                        row={row}
-                    />
                 ),
-            }),
+            },
             columnHelper.accessor('features', {
                 id: 'Updated feature flags',
                 header: 'Updated feature flags',
@@ -149,7 +150,9 @@ const ChangeRequestsInner = () => {
                 id: 'Environment',
                 header: 'Environment',
                 meta: { width: '100px' },
-                cell: ({ getValue }) => <HighlightCell value={getValue()} />,
+                cell: ({ getValue }) => (
+                    <HighlightCell maxTitleLines={1} value={getValue()} />
+                ),
             }),
             columnHelper.accessor('state', {
                 id: 'Status',

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

@@ -2,27 +2,27 @@ import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import { Link, styled, Typography } from '@mui/material';
 import { Link as RouterLink, type LinkProps } from 'react-router-dom';
 import { useProjectOverviewNameOrId } from 'hooks/api/getters/useProjectOverview/useProjectOverview';
-
+import { Truncator } from 'component/common/Truncator/Truncator';
-type IGlobalChangeRequestTitleCellProps = {
+import type { ChangeRequestSearchItemSchema } from 'openapi';
-    value?: any;
-    row: { original: any };
-};
 
 const LinkContainer = styled('div')(({ theme }) => ({
     color: theme.palette.text.secondary,
+    display: 'flex',
+    columnGap: theme.spacing(0.5),
 }));
 
 const BaseLink = styled(({ children, ...props }: LinkProps) => (
     <Link component={RouterLink} {...props}>
         {children}
     </Link>
-))(({ theme }) => ({
+))({
+    whiteSpace: 'nowrap',
     textDecoration: 'none',
     color: 'inherit',
     ':hover': {
         textDecoration: 'underline',
     },
-}));
+});
 
 const ChangeRequestLink = styled(BaseLink)(({ theme }) => ({
     color: theme.palette.primary.main,
@@ -35,32 +35,34 @@ const UpdateText = styled(Typography)(({ theme }) => ({
 }));
 
 export const GlobalChangeRequestTitleCell = ({
-    value,
+    id,
-    row: { original },
+    title,
-}: IGlobalChangeRequestTitleCellProps) => {
+    project,
-    const {
+    features: featureChanges,
-        id,
+    segments: segmentChanges,
-        title,
+}: ChangeRequestSearchItemSchema) => {
-        project,
-        features: featureChanges,
-        segments: segmentChanges,
-    } = original;
     const projectName = useProjectOverviewNameOrId(project);
     const totalChanges =
         featureChanges?.length ?? 0 + segmentChanges?.length ?? 0;
     const projectPath = `/projects/${project}`;
     const crPath = `${projectPath}/change-requests/${id}`;
 
-    if (!value) {
-        return <TextCell />;
-    }
-
     return (
         <TextCell sx={{ minWidth: '300px' }}>
             <LinkContainer>
-                <BaseLink to={projectPath}>{projectName}</BaseLink>
+                <Truncator title={projectName}>
-                <span aria-hidden='true'> / </span>
+                    <BaseLink to={projectPath}>{projectName}</BaseLink>
-                <ChangeRequestLink to={crPath}>{title}</ChangeRequestLink>
+                </Truncator>
+                <span aria-hidden='true'>/</span>
+                {title ? (
+                    <Truncator title={title}>
+                        <ChangeRequestLink to={crPath}>
+                            {title}
+                        </ChangeRequestLink>
+                    </Truncator>
+                ) : (
+                    <ChangeRequestLink to={crPath}>#{id}</ChangeRequestLink>
+                )}
             </LinkContainer>
             <UpdateText>
                 {`${totalChanges}`} {totalChanges === 1 ? `update` : 'updates'}

frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestStatusCell.tsx

@@ -16,14 +16,13 @@ export const ChangeRequestStatusCell: FC<IChangeRequestStatusCellProps> = ({
     value,
     row: { original },
 }) => {
-    const renderState = () => {
-        if (!value) return null;
-        return <ChangeRequestStatusBadge changeRequest={original} />;
-    };
-
     if (!value) {
         return <TextCell />;
     }
 
-    return <TextCell>{renderState()}</TextCell>;
+    return (
+        <TextCell>
+            <ChangeRequestStatusBadge changeRequest={original} />
+        </TextCell>
+    );
 };

frontend/src/component/common/Table/cells/HighlightCell/HighlightCell.tsx

@@ -12,6 +12,7 @@ interface IHighlightCellProps {
     subtitle?: string;
     afterTitle?: React.ReactNode;
     subtitleTooltip?: boolean;
+    maxTitleLines?: number;
 }
 
 const StyledContainer = styled(Box)(({ theme }) => ({
@@ -40,6 +41,7 @@ export const HighlightCell: FC<IHighlightCellProps> = ({
     subtitle,
     afterTitle,
     subtitleTooltip,
+    maxTitleLines,
 }) => {
     const { searchQuery } = useSearchHighlightContext();
 
@@ -68,7 +70,7 @@ export const HighlightCell: FC<IHighlightCellProps> = ({
     return (
         <StyledContainer>
             <Truncator
-                lines={subtitle ? 1 : 2}
+                lines={maxTitleLines ?? (subtitle ? 1 : 2)}
                 title={value}
                 arrow
                 data-loading