From d7adee3f64c649b838f1928b889511231110e2e9 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 11 Jul 2024 10:00:38 +0200
Subject: [PATCH] chore: fix project name overflow (#7575)

Fix overflow in long project names. Show ellipsis where it overflows.


![image](https://github.com/Unleash/unleash/assets/17786332/4723134b-b667-47ab-83e8-02cb3cda9093)


![image](https://github.com/Unleash/unleash/assets/17786332/7f4f0b5b-bc03-460d-8ba1-e0cda51e9a5c)


![image](https://github.com/Unleash/unleash/assets/17786332/8b6528f0-2ed8-4a26-9d22-42fa356583c8)
---
 frontend/src/component/project/Project/Project.styles.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/project/Project/Project.styles.ts b/frontend/src/component/project/Project/Project.styles.ts
index f7551ee326..41a47b498f 100644
--- a/frontend/src/component/project/Project/Project.styles.ts
+++ b/frontend/src/component/project/Project/Project.styles.ts
@@ -3,12 +3,12 @@ import { FavoriteIconButton } from 'component/common/FavoriteIconButton/Favorite
 
 export const StyledDiv = styled('div')(() => ({
     display: 'flex',
+    overflow: 'hidden',
 }));
 
 export const StyledTopRow = styled('div')(() => ({
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
+    display: 'grid',
+    gridTemplateColumns: '1fr auto',
     width: '100%',
 }));
 
@@ -21,6 +21,7 @@ export const StyledName = styled('span')(({ theme }) => ({
     fontSize: theme.typography.h1.fontSize,
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
+    overflow: 'hidden',
 }));
 
 export const StyledTitle = styled('span')(({ theme }) => ({
@@ -60,6 +61,7 @@ export const StyledProjectTitle = styled('span')(({ theme }) => ({
     justifyContent: 'space-between',
     alignItems: 'center',
     gap: theme.spacing(2),
+    overflow: 'hidden',
 }));
 
 export const StyledSeparator = styled('div')(({ theme }) => ({