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:
parent
a4885c45a3
commit
88a42ac849
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user