From 88a42ac849a973151f3924ba4408965f60131d56 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 5 Nov 2025 13:31:00 +0100
Subject: [PATCH] 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"
/>
---
 .../ChangeRequestHeader/ChangeRequestHeader.tsx           | 3 ++-
 .../EnvironmentChangeRequest/ChangeRequestTitle.tsx       | 8 ++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
index 9563c1df3e..2543951fa4 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
@@ -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>
diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/ChangeRequestTitle.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/ChangeRequestTitle.tsx
index 1dc9c13cff..485ebe4f01 100644
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/ChangeRequestTitle.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/ChangeRequestTitle.tsx
@@ -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