feat: update background for tr, td on hover

frontend/src/container/LogsExplorerList/InfinityTableView/InfinityTableView.styles.scss

@@ -0,0 +1,11 @@
+.logs-table {
+	table tbody tr {
+		&:hover {
+			background-color: rgba(171, 189, 255, 0.04);
+
+			td {
+				background-color: rgba(171, 189, 255, 0.04) !important;
+			}
+		}
+	}
+}

frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.styles.scss

@@ -2,3 +2,51 @@
 	cursor: pointer;
 	position: relative;
 }
+
+.log-timestamp {
+	width: 240px;
+	max-width: 240px;
+	min-width: 240px;
+	padding: 4px 8px 6px;
+
+	div {
+		font-weight: 400;
+		line-height: 20px; /* 128.571% */
+		letter-spacing: 0.2px;
+	}
+}
+
+.log-body {
+	margin: 4px 0;
+	width: 700px;
+	max-width: 700px;
+	min-width: 700px;
+	color: white;
+	padding: 4px 8px 6px;
+
+	div {
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 128.571% */
+		letter-spacing: 0.1px;
+
+		width: 100%;
+		min-width: 0 !important;
+	}
+}
+
+.log-actions {
+	position: absolute;
+	right: 0;
+	height: 100%;
+
+	vertical-align: middle;
+}
+
+.lightMode {
+	.log-body {
+		color: '#1d1d1d';
+		background-color: #ffffffd5;
+	}
+}

frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.tsx

@@ -73,6 +73,22 @@ export default function TableRow({
 				const children = elementWithChildren.children as ReactElement;
 				const props = elementWithChildren.props as Record<string, unknown>;
 
+				const isBody = column.key === 'body';
+				const isTimestamp = column.key === 'timestamp';
+
+				if (isTimestamp || isBody) {
+					return (
+						<td
+							key={column.key}
+							className={`${isTimestamp ? 'log-timestamp' : 'log-body'}`}
+						>
+							{cloneElement(children, props)}
+						</td>
+					);
+				}
+
+				// Setting the width of body column to 500px to maintain the consistency and reduce layout shift due to body content change
+
 				return (
 					<TableCellStyled
 						$isDragColumn={false}
@@ -84,11 +100,13 @@ export default function TableRow({
 				);
 			})}
 			{hasActions && isLogsExplorerPage && (
-				<LogLinesActionButtons
-					handleShowContext={handleShowContext}
-					onLogCopy={onLogCopy}
-					customClassName="table-view-log-actions"
-				/>
+				<div className="log-actions">
+					<LogLinesActionButtons
+						handleShowContext={handleShowContext}
+						onLogCopy={onLogCopy}
+						customClassName="table-view-log-actions"
+					/>
+				</div>
 			)}
 		</>
 	);

frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx

@@ -1,3 +1,5 @@
+import './InfinityTableView.styles.scss';
+
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { useTableView } from 'components/Logs/TableView/useTableView';
@@ -138,6 +140,7 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 						tableViewProps.activeLogIndex !== -1 ? tableViewProps.activeLogIndex : 0
 					}
 					style={infinityDefaultStyles}
+					className="logs-table"
 					data={dataSource}
 					components={{
 						// eslint-disable-next-line react/jsx-props-no-spreading