From 25010174f0a5d216ad004384b1c86a9e39d4059e Mon Sep 17 00:00:00 2001 From: Muhammad Abdullah <118609756+abdullah5361k@users.noreply.github.com> Date: Tue, 22 Oct 2024 00:47:17 +0500 Subject: [PATCH] =?UTF-8?q?Adjust=20the=20line=20height=20and=20expand=20t?= =?UTF-8?q?he=20maximum=20height=20of=20the=20plac=E2=80=A6=20(#7764)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fixes: #7757 ## What does this PR do? We increased the line height from md to lg and the max height of the placeholder subtitle text from 2.4 to 2.8 to ensure that letters are no longer slightly cut off in the placeholder in Functions. ![twenty-placeholder-text](https://github.com/user-attachments/assets/1cfed3c4-6bae-4200-9516-4e1295da170a) ## How should this be tested? 1. Log in 2. Go to Settings 3. Toggle "Advanced" settings 4. Go to Functions --------- Co-authored-by: Charles Bochet --- .../components/EmptyPlaceholderStyled.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx index d088ec7e5..e942ef6c9 100644 --- a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx +++ b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx @@ -26,7 +26,7 @@ const StyledEmptyTextContainer = styled.div` align-items: center; display: flex; flex-direction: column; - gap: ${({ theme }) => theme.spacing(3)}; + gap: ${({ theme }) => theme.spacing(2)}; justify-content: center; text-align: center; width: 100%; @@ -46,8 +46,8 @@ const StyledEmptySubTitle = styled.div` color: ${({ theme }) => theme.font.color.tertiary}; font-size: ${({ theme }) => theme.font.size.sm}; font-weight: ${({ theme }) => theme.font.weight.regular}; - line-height: ${({ theme }) => theme.text.lineHeight.md}; - max-height: 2.4em; + line-height: ${({ theme }) => theme.text.lineHeight.lg}; + max-height: 2.8em; overflow: hidden; width: 50%; `;