From 23852afcdd3c672a65d380c7ecf894bb63702cb8 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 10 Mar 2025 15:09:05 +0100
Subject: [PATCH] chore: Constrains custom strategy titles to a single line
 (#9469)

Constrains long custom strategy titles to a single line.

Before:

![image](https://github.com/user-attachments/assets/e00545db-bf95-4539-ac6e-557a8784ddd0)


After:

![image](https://github.com/user-attachments/assets/266bad74-77ba-4e59-8317-2d6b9d2333a7)
---
 .../StrategyItemContainer.tsx                      | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
index d908984777..22349c178e 100644
--- a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
+++ b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
@@ -8,6 +8,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import type { PlaygroundStrategySchema } from 'openapi';
 import { Badge } from '../Badge/Badge';
 import { Link } from 'react-router-dom';
+import { Truncator } from '../Truncator/Truncator';
 
 type StrategyItemContainerProps = {
     strategyHeaderLevel?: 1 | 2 | 3 | 4 | 5 | 6;
@@ -46,11 +47,12 @@ const StyledCustomTitle = styled('div')(({ theme }) => ({
 }));
 const StyledHeaderContainer = styled('hgroup')(({ theme }) => ({
     display: 'flex',
-    flexFlow: 'row',
+    flexFlow: 'row nowrap',
     columnGap: '1ch',
     fontSize: theme.typography.body1.fontSize,
     '.strategy-name': {
         fontWeight: 'bold',
+        whiteSpace: 'nowrap',
     },
 }));
 
@@ -58,6 +60,12 @@ const StyledContainer = styled('article')({
     background: 'inherit',
 });
 
+const StyledTruncator = styled(Truncator)(({ theme }) => ({
+    fontSize: theme.typography.body1.fontSize,
+    fontWeight: 'normal',
+    margin: 0,
+}));
+
 const NewStyledHeader = styled('div', {
     shouldForwardProp: (prop) => prop !== 'draggable' && prop !== 'disabled',
 })<{ draggable: boolean; disabled: boolean }>(
@@ -124,11 +132,11 @@ export const StrategyItemContainer: FC<StrategyItemContainerProps> = ({
                                         )}
                                         :
                                     </p>
-                                    <Typography
+                                    <StyledTruncator
                                         component={`h${strategyHeaderLevel}`}
                                     >
                                         {strategy.title}
-                                    </Typography>
+                                    </StyledTruncator>
                                 </>
                             ) : (
                                 <Typography