Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-31 13:47:02 +02:00
Code Issues Projects Releases Wiki Activity

chore: Constrains custom strategy titles to a single line (#9469)

Browse Source 
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)
This commit is contained in:
Thomas Heartman 2025-03-10 15:09:05 +01:00 committed by GitHub
parent 51c9617da8
commit 23852afcdd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
View File

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