1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-11-10 01:19:53 +01:00

fix: cap rendered change request title height to 3 lines (#10922)

Caps the rendered change request title height to 3 lines and makes the
edit button rectangular-ish instead of circular. This will work better
as it can grow arbitrarily tall.

## Title capping
Before:
<img width="753" height="1260" alt="image"
src="https://github.com/user-attachments/assets/8ae278f9-cc97-4803-8c29-4f3fede99b52"
/>


After:
<img width="1506" height="216" alt="image"
src="https://github.com/user-attachments/assets/c5ca04e9-b1c7-4d36-b023-86f6fbb322db"
/>

## Edit button border fix
Before:
<img width="1441" height="251" alt="image"
src="https://github.com/user-attachments/assets/40df8747-a68f-4d36-af67-888c841cfcad"
/>


After:
<img width="1455" height="247" alt="image"
src="https://github.com/user-attachments/assets/c63380cb-ebe8-481d-a959-087dbf79b9fc"
/>
This commit is contained in:
Thomas Heartman 2025-11-05 13:31:00 +01:00 committed by GitHub
parent a4885c45a3
commit 88a42ac849
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 3 deletions

View File

@ -14,6 +14,7 @@ import {
import { Separator } from '../../ChangeRequestSidebar/ChangeRequestSidebar.tsx';
import { ChangeRequestTitle } from '../../ChangeRequestSidebar/EnvironmentChangeRequest/ChangeRequestTitle.tsx';
import { UpdateCount } from 'component/changeRequest/UpdateCount';
import { Truncator } from 'component/common/Truncator/Truncator.tsx';
export const ChangeRequestHeader: FC<{ changeRequest: ChangeRequestType }> = ({
changeRequest,
@ -27,7 +28,7 @@ export const ChangeRequestHeader: FC<{ changeRequest: ChangeRequestType }> = ({
setTitle={setTitle}
>
<StyledHeader variant='h1' component='h2' sx={{ mr: 1.5 }}>
{title}
<Truncator lines={3}>{title}</Truncator>
</StyledHeader>
</ChangeRequestTitle>
<StyledInnerContainer>

View File

@ -25,6 +25,10 @@ export const StyledHeader = styled(Typography)(({ theme }) => ({
fontSize: theme.fontSizes.mainHeader,
}));
const StyledIconButton = styled(IconButton)(({ theme }) => ({
borderRadius: theme.shape.borderRadius,
}));
export const ChangeRequestTitle: FC<{
environmentChangeRequest: ChangeRequestType;
title: string;
@ -74,9 +78,9 @@ export const ChangeRequestTitle: FC<{
<ConditionallyRender
condition={isDisabled}
show={
<IconButton onClick={toggleEditState}>
<StyledIconButton onClick={toggleEditState}>
<Edit />
</IconButton>
</StyledIconButton>
}
/>
<ConditionallyRender