From 6812f55152645d45dc1b991dcffe6090319b5afd Mon Sep 17 00:00:00 2001
From: Fellipe Montes <102544529+FellipeMTX@users.noreply.github.com>
Date: Fri, 13 Jan 2023 05:37:23 -0300
Subject: [PATCH] change CSS and isEllipsed variable (#2035)

Co-authored-by: Palash Gupta <palashgdev@gmail.com>
---
 .../container/TraceDetail/SelectedSpanDetails/Tags/Tag.tsx | 2 +-
 .../container/TraceDetail/SelectedSpanDetails/styles.ts    | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/Tag.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/Tag.tsx
index 1996c106be..1f67dde5e1 100644
--- a/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/Tag.tsx
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/Tag.tsx
@@ -29,7 +29,7 @@ function Tag({ tags, onToggleHandler, setText }: TagProps): JSX.Element {
 						<Tooltip overlay={(): string => value}>
 							<CustomSubText
 								ellipsis={{
-									rows: isEllipsed ? 1 : 0,
+									rows: isEllipsed ? 2 : 0,
 								}}
 								isDarkMode={isDarkMode}
 							>
diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts b/frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts
index 3c9180dc94..027d8b9ce0 100644
--- a/frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/styles.ts
@@ -49,10 +49,11 @@ export const CardContainer = styled.div`
 	height: 100%;
 	width: 100%;
 	flex: 1;
-	overflow-y: auto;
-	overflow-x: hidden;
-	white-space: nowrap;
 	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: auto;
 `;
 
 export const CustomSpace = styled(Space)`