From 64901187410d98a2f29ef0c048b50b9d5ea180d6 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 2 Jan 2023 18:14:44 -0800
Subject: [PATCH] Fix ellipsis overflow styles

---
 src/renderer/components/text-title/index.tsx | 4 ++--
 src/renderer/components/text/index.tsx       | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/text-title/index.tsx b/src/renderer/components/text-title/index.tsx
index fe19b91b..f456bb78 100644
--- a/src/renderer/components/text-title/index.tsx
+++ b/src/renderer/components/text-title/index.tsx
@@ -17,12 +17,12 @@ interface TextTitleProps extends MantineTextTitleDivProps {
 }
 
 const StyledTextTitle = styled(MantineHeader)<TextTitleProps>`
-  overflow: ${(props) => props.overflow === 'visible' && 'visible'};
+  overflow: ${(props) => props.overflow};
   color: ${(props) => (props.$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
   cursor: ${(props) => props.$link && 'cursor'};
   transition: color 0.2s ease-in-out;
   user-select: ${(props) => (props.$noSelect ? 'none' : 'auto')};
-  ${(props) => props.overflow === 'hidden' && textEllipsis}
+  ${(props) => props.overflow === 'hidden' && !props.lineClamp && textEllipsis}
 
   &:hover {
     color: ${(props) => props.$link && 'var(--main-fg)'};
diff --git a/src/renderer/components/text/index.tsx b/src/renderer/components/text/index.tsx
index bbc53c7c..7173ce28 100644
--- a/src/renderer/components/text/index.tsx
+++ b/src/renderer/components/text/index.tsx
@@ -19,12 +19,13 @@ interface TextProps extends MantineTextDivProps {
 }
 
 const StyledText = styled(MantineText)<TextProps>`
+  overflow: ${(props) => props.overflow};
   color: ${(props) => (props.$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
   font-family: ${(props) => props.font};
   cursor: ${(props) => props.$link && 'cursor'};
   transition: color 0.2s ease-in-out;
   user-select: ${(props) => (props.$noSelect ? 'none' : 'auto')};
-  ${(props) => props.overflow === 'hidden' && textEllipsis}
+  ${(props) => props.overflow === 'hidden' && !props.lineClamp && textEllipsis}
 
   &:hover {
     color: ${(props) => props.$link && 'var(--main-fg)'};