1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-10 01:16:39 +02:00

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](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.
This commit is contained in:
Thomas Heartman 2024-07-29 17:03:47 +02:00 committed by GitHub
parent 21ab80b753
commit 344e599b09
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

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