fix(FE/Logs): fix all logs not visible on scrolling (#3512)

* fix(FE/Logs): fix all logs not visible on scrolling

* fix(FE/logs): fix scroll behaviour in live logs

* refactor(FE/logs): replaced StyledComponents with scss

---------

Co-authored-by: Rajat Dabade <rajat@signoz.io>

frontend/src/constants/card.ts

@@ -0,0 +1,4 @@
+export const CARD_BODY_STYLE = {
+	padding: '0',
+	height: '100%',
+};

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -2,6 +2,7 @@ import { Card, Typography } from 'antd';
 import ListLogView from 'components/Logs/ListLogView';
 import RawLogView from 'components/Logs/RawLogView';
 import Spinner from 'components/Spinner';
+import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { OptionFormatTypes } from 'constants/optionsFormatTypes';
 import InfinityTableView from 'container/LogsExplorerList/InfinityTableView';
@@ -9,7 +10,6 @@ import { InfinityWrapperStyled } from 'container/LogsExplorerList/styles';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { Heading } from 'container/LogsTable/styles';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import { contentStyle } from 'container/Trace/Search/config';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import useFontFaceObserver from 'hooks/useFontObserver';
 import { useEventSource } from 'providers/EventSource';
@@ -112,10 +112,9 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {
 							}}
 						/>
 					) : (
-						<Card style={{ width: '100%' }} bodyStyle={{ ...contentStyle }}>
+						<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>
 							<Virtuoso
 								ref={ref}
-								useWindowScroll
 								data={logs}
 								totalCount={logs.length}
 								itemContent={getItemContent}

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

@@ -144,7 +144,6 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 		return (
 			<>
 				<TableVirtuoso
-					useWindowScroll
 					ref={ref}
 					style={infinityDefaultStyles}
 					data={dataSource}

frontend/src/container/LogsExplorerList/index.tsx

@@ -3,11 +3,11 @@ import { Card, Typography } from 'antd';
 import ListLogView from 'components/Logs/ListLogView';
 import RawLogView from 'components/Logs/RawLogView';
 import Spinner from 'components/Spinner';
+import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ExplorerControlPanel from 'container/ExplorerControlPanel';
 import { Heading } from 'container/LogsTable/styles';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import { contentStyle } from 'container/Trace/Search/config';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import useFontFaceObserver from 'hooks/useFontObserver';
@@ -116,10 +116,9 @@ function LogsExplorerList({
 		}
 
 		return (
-			<Card style={{ width: '100%' }} bodyStyle={{ ...contentStyle }}>
+			<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>
 				<Virtuoso
 					ref={ref}
-					useWindowScroll
 					data={logs}
 					endReached={onEndReached}
 					totalCount={logs.length}

frontend/src/container/LogsExplorerList/styles.ts

@@ -3,4 +3,5 @@ import styled from 'styled-components';
 export const InfinityWrapperStyled = styled.div`
 	min-height: 40rem;
 	display: flex;
+	height: 100%;
 `;

frontend/src/container/LogsTable/index.tsx

@@ -1,10 +1,12 @@
+import './logsTable.styles.scss';
+
 import { Card, Typography } from 'antd';
 // components
 import ListLogView from 'components/Logs/ListLogView';
 import RawLogView from 'components/Logs/RawLogView';
 import LogsTableView from 'components/Logs/TableView';
 import Spinner from 'components/Spinner';
-import { contentStyle } from 'container/Trace/Search/config';
+import { CARD_BODY_STYLE } from 'constants/card';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import useFontFaceObserver from 'hooks/useFontObserver';
 import { memo, useCallback, useMemo } from 'react';
@@ -85,12 +87,8 @@ function LogsTable(props: LogsTableProps): JSX.Element {
 		}
 
 		return (
-			<Card bodyStyle={contentStyle}>
-				<Virtuoso
-					useWindowScroll
-					totalCount={logs.length}
-					itemContent={getItemContent}
-				/>
+			<Card className="logs-card" bodyStyle={CARD_BODY_STYLE}>
+				<Virtuoso totalCount={logs.length} itemContent={getItemContent} />
 			</Card>
 		);
 	}, [getItemContent, linesPerRow, logs, onSetActiveLog, selected, viewMode]);

frontend/src/container/LogsTable/logsTable.styles.scss

@@ -0,0 +1,3 @@
+.logs-card {
+    flex: 1;
+}

frontend/src/container/LogsTable/styles.ts

@@ -6,6 +6,9 @@ export const Container = styled.div`
 	width: 100%;
 	margin-bottom: 1rem;
 	margin-top: 0.5rem;
+	display: flex;
+	flex-direction: column;
+	flex: 1;
 `;
 
 export const Heading = styled(Card)`

frontend/src/pages/Logs/index.tsx

@@ -1,3 +1,5 @@
+import './logs.styles.scss';
+
 import { Button, Col, Divider, Popover, Row, Select, Space } from 'antd';
 import { QueryParams } from 'constants/query';
 import LogControls from 'container/LogControls';
@@ -93,7 +95,7 @@ function Logs(): JSX.Element {
 
 			<Row gutter={20} wrap={false}>
 				<LogsFilters />
-				<Col flex={1}>
+				<Col flex={1} className="logs-col-container">
 					<Row>
 						<Col flex={1}>
 							<Space align="baseline" direction="horizontal">

frontend/src/pages/Logs/logs.styles.scss

@@ -0,0 +1,4 @@
+.logs-col-container {
+    display: flex;
+    flex-direction: column;
+}