fix: don't cut off hover-color of favorite button (#7691)

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](#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

@@ -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',