diff --git a/frontend/src/components/Logs/RawLogView/index.tsx b/frontend/src/components/Logs/RawLogView/index.tsx
index 42c7aae4ae..194ce53d28 100644
--- a/frontend/src/components/Logs/RawLogView/index.tsx
+++ b/frontend/src/components/Logs/RawLogView/index.tsx
@@ -42,15 +42,13 @@ interface RawLogViewProps {
 	linesPerRow: number;
 }
 
-function RawLogView(props: RawLogViewProps): JSX.Element {
-	const {
-		isActiveLog = false,
-		isReadOnly = false,
-		data,
-		linesPerRow,
-		isTextOverflowEllipsisDisabled = false,
-	} = props;
-
+function RawLogView({
+	isActiveLog,
+	isReadOnly,
+	data,
+	linesPerRow,
+	isTextOverflowEllipsisDisabled,
+}: RawLogViewProps): JSX.Element {
 	const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink(
 		data.id,
 	);
diff --git a/frontend/src/components/Logs/RawLogView/styles.ts b/frontend/src/components/Logs/RawLogView/styles.ts
index e47e736d61..8e1394af89 100644
--- a/frontend/src/components/Logs/RawLogView/styles.ts
+++ b/frontend/src/components/Logs/RawLogView/styles.ts
@@ -5,8 +5,8 @@ import { getActiveLogBackground, getDefaultLogBackground } from 'utils/logs';
 
 export const RawLogViewContainer = styled(Row)<{
 	$isDarkMode: boolean;
-	$isReadOnly: boolean;
-	$isActiveLog: boolean;
+	$isReadOnly?: boolean;
+	$isActiveLog?: boolean;
 }>`
 	position: relative;
 	width: 100%;
@@ -33,9 +33,9 @@ export const ExpandIconWrapper = styled(Col)`
 
 interface RawLogContentProps {
 	linesPerRow: number;
-	$isReadOnly: boolean;
-	$isActiveLog: boolean;
-	$isTextOverflowEllipsisDisabled: boolean;
+	$isReadOnly?: boolean;
+	$isActiveLog?: boolean;
+	$isTextOverflowEllipsisDisabled?: boolean;
 }
 
 export const RawLogContent = styled.div<RawLogContentProps>`
@@ -43,24 +43,24 @@ export const RawLogContent = styled.div<RawLogContentProps>`
 	font-family: Fira Code, monospace;
 	font-weight: 300;
 
-	${(props): string =>
-		props.$isTextOverflowEllipsisDisabled
+	${({ $isTextOverflowEllipsisDisabled, linesPerRow }): string =>
+		$isTextOverflowEllipsisDisabled
 			? 'white-space: nowrap'
 			: `overflow: hidden;
 		text-overflow: ellipsis; 
 		display: -webkit-box;
-		-webkit-line-clamp: ${props.linesPerRow};
-		line-clamp: ${props.linesPerRow}; 
+		-webkit-line-clamp: ${linesPerRow};
+		line-clamp: ${linesPerRow}; 
 		-webkit-box-orient: vertical;`};
 
 	font-size: 1rem;
 	line-height: 2rem;
 
-	cursor: ${(props): string =>
-		props.$isActiveLog || props.$isReadOnly ? 'initial' : 'pointer'};
+	cursor: ${({ $isActiveLog, $isReadOnly }): string =>
+		$isActiveLog || $isReadOnly ? 'initial' : 'pointer'};
 
-	${(props): string =>
-		props.$isReadOnly && !props.$isActiveLog ? 'padding: 0 1.5rem;' : ''}
+	${({ $isActiveLog, $isReadOnly }): string =>
+		$isReadOnly && $isActiveLog ? 'padding: 0 1.5rem;' : ''}
 `;
 
 export const ActionButtonsWrapper = styled(Space)`
diff --git a/frontend/src/utils/logs.ts b/frontend/src/utils/logs.ts
index 66a6ba28a6..bfe79a3177 100644
--- a/frontend/src/utils/logs.ts
+++ b/frontend/src/utils/logs.ts
@@ -3,8 +3,8 @@ import { themeColors } from 'constants/theme';
 import getAlphaColor from 'utils/getAlphaColor';
 
 export const getDefaultLogBackground = (
-	isReadOnly: boolean,
-	isDarkMode: boolean,
+	isReadOnly?: boolean,
+	isDarkMode?: boolean,
 ): string => {
 	if (isReadOnly) return '';
 	return `&:hover {