From f28989749bfceeda80746da4ed4eedcd639db159 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Fri, 31 May 2024 10:37:51 +0200 Subject: [PATCH] fix: correctly align project card info when some cards have multi-line names (#7223) 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) --- .../project/NewProjectCard/NewProjectCard.styles.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/src/component/project/NewProjectCard/NewProjectCard.styles.ts b/frontend/src/component/project/NewProjectCard/NewProjectCard.styles.ts index 7b3660abe2..cb81c2688f 100644 --- a/frontend/src/component/project/NewProjectCard/NewProjectCard.styles.ts +++ b/frontend/src/component/project/NewProjectCard/NewProjectCard.styles.ts @@ -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', }));