From 344e599b096318aaba25e710ea0d203a3b4616c5 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 29 Jul 2024 17:03:47 +0200
Subject: [PATCH] fix: don't cut off hover-color of favorite button (#7691)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR fixes a minor visual issue where the "favorite project" button's
hover outline would get cut off due to its container having `overflow:
hidden`.

The overflow value was introduced in
[#7575](https://github.com/Unleash/unleash/pull/7575) as way to handle
long project names. We didn't discover the hover issue back then because
it's not apparent unless you hover the fav star.

I found the solution in the CSS-tricks post [Preventing a Grid
Blowout](https://css-tricks.com/preventing-a-grid-blowout/). To quote
the article, the reason this works is that:

> the minimum width of a grid column is auto. (The same is true for flex
items, by the way.)
>
> And since auto is entirely based on content, we can say it is
“indefinitely” sized, its dimensions flex. If we were to put an explicit
width on the column, like 50% or 400px, then we would say it is
“definitely” sized.
>
> To apply our fix, we need to make sure that there is the column has a
definite minimum width instead of auto.

Before:

![image](https://github.com/user-attachments/assets/d9296afd-326e-4712-a389-f1bc3a1f821e)


After:

![image](https://github.com/user-attachments/assets/2fd88a51-08be-4bc4-8969-cd6ebbaf255c)

Additionally, I've removed a duplicate declaration of font size,
removing the deprecated version.
---
 frontend/src/component/project/Project/Project.styles.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/project/Project/Project.styles.ts b/frontend/src/component/project/Project/Project.styles.ts
index 4c97992b7eee..dce665c270c6 100644
--- a/frontend/src/component/project/Project/Project.styles.ts
+++ b/frontend/src/component/project/Project/Project.styles.ts
@@ -3,12 +3,11 @@ import { FavoriteIconButton } from 'component/common/FavoriteIconButton/Favorite
 
 export const StyledDiv = styled('div')(() => ({
     display: 'flex',
-    overflow: 'hidden',
 }));
 
 export const StyledTopRow = styled('div')(() => ({
     display: 'grid',
-    gridTemplateColumns: '1fr auto',
+    gridTemplateColumns: 'minmax(0, 1fr) auto',
     width: '100%',
 }));
 
@@ -18,7 +17,6 @@ export const StyledColumn = styled('div')(() => ({
 }));
 
 export const StyledName = styled('span')(({ theme }) => ({
-    fontSize: theme.typography.h1.fontSize,
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -55,7 +53,7 @@ export const StyledInnerContainer = styled('div')(({ theme }) => ({
 export const StyledProjectTitle = styled('span')(({ theme }) => ({
     margin: 0,
     width: '100%',
-    fontSize: theme.fontSizes.mainHeader,
+    fontSize: theme.typography.h1.fontSize,
     fontWeight: 'bold',
     display: 'flex',
     alignItems: 'center',