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)

Author: thomasheartman

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,18 +47,25 @@ 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',
     },
 }));
 
 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