Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

fix: correctly align project card info when some cards have multi-line names (#7223)

Browse Source 
This change updates the styling of the project card bodies so that
alignment of the project data (number of flags, members, health) stays
at the bottom of the project card body, even if some cards have longer
bodies than others. It also updates the icon placement so that it is
consistent even when the title is multi-line.

Before this change, the bottom row would be misaligned if some (but
not all) project cards on a row had names long enough to span multiple
lines. The project icon would also be misaligned

Before:

![image](https://github.com/Unleash/unleash/assets/17786332/1d1b99a3-263a-4472-8872-0ac59afd252b)

Misaligned project icon: 

![image](https://github.com/Unleash/unleash/assets/17786332/3b805728-c61d-409c-b293-45b37d096b45)



After:


![image](https://github.com/Unleash/unleash/assets/17786332/e81fcdbc-619a-4da3-a559-89af5acff656)

Icon alignment: 

![image](https://github.com/Unleash/unleash/assets/17786332/0e6f669f-1a25-4074-b8c0-6dbdcafbb828)
This commit is contained in:
Thomas Heartman 2024-05-31 10:37:51 +02:00 committed by GitHub
parent d6dc2b4ce2
commit f28989749b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/component/project/NewProjectCard/NewProjectCard.styles.ts
View File

@ -24,6 +24,10 @@ export const StyledProjectCard = styled(Card)(({ theme }) => ({
export const StyledProjectCardBody = styled(Box)(({ theme }) => ({
padding: theme.spacing(1, 2, 2, 2),
display: 'flex',
flexFlow: 'column',
justifyContent: 'space-between',
height: '100%',
}));
export const StyledDivHeader = styled('div')(({ theme }) => ({
@ -83,6 +87,7 @@ export const StyledProjectIcon = styled(ProjectIcon)(({ theme }) => ({
export const StyledIconBox = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'center',
padding: theme.spacing(0.5, 0.5, 0.5, 0),
padding: theme.spacing(1, 0.5, 0.5, 0),
marginRight: theme.spacing(2),
alignSelf: 'baseline',
}));