chore: fmt ListLogView.styles.scss

frontend/src/components/Logs/ListLogView/ListLogView.styles.scss

@@ -1,11 +1,15 @@
-.log-field-key {
-	padding-right: 5px;
+.log-field-container {
+	display: flex;
+	overflow: hidden;
+	width: 100%;
+	align-items: baseline;
+}
+.log-field-key,
+.log-field-key-colon {
 	color: var(--text-vanilla-400, #c0c1c3);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
-	line-height: 18px; /* 128.571% */
-	letter-spacing: -0.07px;
 
 	&.small {
 		font-size: 11px;
@@ -22,6 +26,20 @@
 		line-height: 24px;
 	}
 }
+.log-field-key {
+	line-height: 18px; /* 128.571% */
+	letter-spacing: -0.07px;
+	white-space: nowrap;
+	display: inline-block;
+	max-width: 20vw;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	margin: 0;
+}
+.log-field-key-colon {
+	min-width: 0.8rem;
+	flex-shrink: 0;
+}
 .log-value {
 	color: var(--text-vanilla-400, #c0c1c3);
 	font-size: 14px;
@@ -158,7 +176,8 @@
 }
 
 .lightMode {
-	.log-field-key {
+	.log-field-key,
+	.log-field-key-colon {
 		color: var(--text-slate-400);
 	}
 	.log-value {
@@ -170,3 +189,10 @@
 		}
 	}
 }
+
+.dark {
+	.log-field-key,
+	.log-field-key-colon {
+		color: rgba(255, 255, 255, 0.45);
+	}
+}

frontend/src/components/Logs/ListLogView/index.tsx

@@ -25,13 +25,7 @@ import LogLinesActionButtons from '../LogLinesActionButtons/LogLinesActionButton
 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
 import { getLogIndicatorType } from '../LogStateIndicator/utils';
 // styles
-import {
-	Container,
-	LogContainer,
-	LogText,
-	Text,
-	TextContainer,
-} from './styles';
+import { Container, LogContainer, LogText } from './styles';
 import { isValidLogField } from './util';
 
 interface LogFieldProps {
@@ -58,16 +52,18 @@ function LogGeneralField({
 	);
 
 	return (
-		<TextContainer>
-			<Text ellipsis type="secondary" className={cx('log-field-key', fontSize)}>
-				{`${fieldKey} : `}
-			</Text>
+		<div className="log-field-container">
+			<p className={cx('log-field-key', fontSize)} title={fieldKey}>
+				{fieldKey}
+			</p>
+			<span className={cx('log-field-key-colon', fontSize)}>&nbsp;:&nbsp;</span>
 			<LogText
 				dangerouslySetInnerHTML={html}
 				className={cx('log-value', fontSize)}
+				title={fieldValue}
 				linesPerRow={linesPerRow > 1 ? linesPerRow : undefined}
 			/>
-		</TextContainer>
+		</div>
 	);
 }
 

frontend/src/components/Logs/ListLogView/styles.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import { Card, Typography } from 'antd';
+import { Card } from 'antd';
 import { FontSize } from 'container/OptionsMenu/types';
 import styled from 'styled-components';
 import { getActiveLogBackground } from 'utils/logs';
@@ -46,19 +46,6 @@ export const Container = styled(Card)<{
 			getActiveLogBackground($isActiveLog, $isDarkMode, $logType)}
 `;
 
-export const Text = styled(Typography.Text)`
-	&&& {
-		min-width: 2.5rem;
-		white-space: nowrap;
-	}
-`;
-
-export const TextContainer = styled.div`
-	display: flex;
-	overflow: hidden;
-	width: 100%;
-`;
-
 export const LogContainer = styled.div<LogContainerProps>`
 	margin-left: 0.5rem;
 	display: flex;