From 758b10f1bfb6b9b5bce98cecb357b472796b2bab Mon Sep 17 00:00:00 2001
From: Vikrant Gupta <vikrant.thomso@gmail.com>
Date: Fri, 23 Aug 2024 00:54:30 +0530
Subject: [PATCH] fix: raw view css condense fix for line clamp (#5755)

---
 .../src/components/Logs/RawLogView/index.tsx     |  1 +
 .../src/components/Logs/RawLogView/styles.ts     | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Logs/RawLogView/index.tsx b/frontend/src/components/Logs/RawLogView/index.tsx
index 935f423393..292d7e029a 100644
--- a/frontend/src/components/Logs/RawLogView/index.tsx
+++ b/frontend/src/components/Logs/RawLogView/index.tsx
@@ -162,6 +162,7 @@ function RawLogView({
 			$isActiveLog={isActiveLog}
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={handleMouseLeave}
+			fontSize={fontSize}
 		>
 			<LogStateIndicator
 				type={logType}
diff --git a/frontend/src/components/Logs/RawLogView/styles.ts b/frontend/src/components/Logs/RawLogView/styles.ts
index 35b853d929..d464f35910 100644
--- a/frontend/src/components/Logs/RawLogView/styles.ts
+++ b/frontend/src/components/Logs/RawLogView/styles.ts
@@ -13,6 +13,7 @@ export const RawLogViewContainer = styled(Row)<{
 	$isReadOnly?: boolean;
 	$isActiveLog?: boolean;
 	$isHightlightedLog: boolean;
+	fontSize: FontSize;
 }>`
 	position: relative;
 	width: 100%;
@@ -24,6 +25,13 @@ export const RawLogViewContainer = styled(Row)<{
 
 	.log-state-indicator {
 		margin: 4px 0;
+
+		${({ fontSize }): string =>
+			fontSize === FontSize.SMALL
+				? `margin: 1px 0;`
+				: fontSize === FontSize.MEDIUM
+				? `margin: 1px 0;`
+				: `margin: 2px 0;`}
 	}
 
 	${({ $isActiveLog }): string => getActiveLogBackground($isActiveLog)}
@@ -50,13 +58,8 @@ export const ExpandIconWrapper = styled(Col)`
 
 export const RawLogContent = styled.div<RawLogContentProps>`
 	margin-bottom: 0;
-	display: flex !important;
-	align-items: center;
 	font-family: 'SF Mono', monospace;
 	font-family: 'Geist Mono';
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 24px;
 	letter-spacing: -0.07px;
 	padding: 4px;
 	text-align: left;
@@ -73,6 +76,9 @@ export const RawLogContent = styled.div<RawLogContentProps>`
 		line-clamp: ${linesPerRow}; 
 		-webkit-box-orient: vertical;`};
 
+	font-size: 13px;
+	font-weight: 400;
+	line-height: 24px;
 	${({ fontSize }): string =>
 		fontSize === FontSize.SMALL
 			? `font-size:11px; line-height:16px; padding:1px;`