Skip to content

Commit 23852af

Browse files
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)
1 parent 51c9617 commit 23852af

File tree

1 file changed

+11
-3
lines changed

1 file changed

+11
-3
lines changed

frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx

+11-3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
88
import type { PlaygroundStrategySchema } from 'openapi';
99
import { Badge } from '../Badge/Badge';
1010
import { Link } from 'react-router-dom';
11+
import { Truncator } from '../Truncator/Truncator';
1112

1213
type StrategyItemContainerProps = {
1314
strategyHeaderLevel?: 1 | 2 | 3 | 4 | 5 | 6;
@@ -46,18 +47,25 @@ const StyledCustomTitle = styled('div')(({ theme }) => ({
4647
}));
4748
const StyledHeaderContainer = styled('hgroup')(({ theme }) => ({
4849
display: 'flex',
49-
flexFlow: 'row',
50+
flexFlow: 'row nowrap',
5051
columnGap: '1ch',
5152
fontSize: theme.typography.body1.fontSize,
5253
'.strategy-name': {
5354
fontWeight: 'bold',
55+
whiteSpace: 'nowrap',
5456
},
5557
}));
5658

5759
const StyledContainer = styled('article')({
5860
background: 'inherit',
5961
});
6062

63+
const StyledTruncator = styled(Truncator)(({ theme }) => ({
64+
fontSize: theme.typography.body1.fontSize,
65+
fontWeight: 'normal',
66+
margin: 0,
67+
}));
68+
6169
const NewStyledHeader = styled('div', {
6270
shouldForwardProp: (prop) => prop !== 'draggable' && prop !== 'disabled',
6371
})<{ draggable: boolean; disabled: boolean }>(
@@ -124,11 +132,11 @@ export const StrategyItemContainer: FC<StrategyItemContainerProps> = ({
124132
)}
125133
:
126134
</p>
127-
<Typography
135+
<StyledTruncator
128136
component={`h${strategyHeaderLevel}`}
129137
>
130138
{strategy.title}
131-
</Typography>
139+
</StyledTruncator>
132140
</>
133141
) : (
134142
<Typography

0 commit comments

Comments
 (0)