[Refactor]: Height for log explorer list panel (#4657)

* refactor: added fullview and fix height issue for logs

* refactor: hide full view button on full view mode

* refactor: removed fullview for logs

* refactor: remove max with for body

frontend/src/components/Logs/TableView/config.ts

@@ -14,12 +14,12 @@ export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
 		lineHeight: '18px',
 		letterSpacing: '-0.07px',
 		marginBottom: '0px',
+		minWidth: '10rem',
 	};
 }
 
 export const defaultTableStyle: CSSProperties = {
 	minWidth: '40rem',
-	maxWidth: '40rem',
 };
 
 export const defaultListViewPanelStyle: CSSProperties = {

frontend/src/container/LogsExplorerList/LogsExplorerList.style.scss

@@ -1,4 +1,7 @@
 .logs-list-view-container {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
 	font-family: 'Space Mono', monospace;
 	font-size: 14px;
 	font-weight: 400;

frontend/src/container/LogsExplorerList/styles.ts

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
 export const InfinityWrapperStyled = styled.div`
+	flex: 1;
 	height: 40rem !important;
 	display: flex;
 	height: 100%;

frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss

@@ -1,7 +1,15 @@
 .logs-explorer-views-container {
 	margin-bottom: 24px;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
 
 	.logs-explorer-views-types {
+		width: -webkit-fill-available;
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+
 		.views-tabs-container {
 			padding: 8px 16px;
 			border: 1px solid var(--text-slate-400);
@@ -85,6 +93,10 @@
 		}
 
 		.logs-explorer-views-type-content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
 			.ant-card {
 				border: none !important;
 			}

frontend/src/pages/LogsExplorer/LogsExplorer.styles.scss

@@ -0,0 +1,11 @@
+.log-explorer-query-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    .logs-explorer-views {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+}

frontend/src/pages/LogsExplorer/index.tsx

@@ -1,8 +1,8 @@
-import { Col, Row } from 'antd';
+import './LogsExplorer.styles.scss';
+
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import LogExplorerQuerySection from 'container/LogExplorerQuerySection';
 import LogsExplorerViews from 'container/LogsExplorerViews';
-// import LogsTopNav from 'container/LogsTopNav';
 import LeftToolbarActions from 'container/QueryBuilder/components/ToolbarActions/LeftToolbarActions';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import Toolbar from 'container/Toolbar/Toolbar';
@@ -87,19 +87,19 @@ function LogsExplorer(): JSX.Element {
 			/>
 
 			<WrapperStyled>
-				<Row gutter={[0, 0]}>
-					<Col xs={24}>
+				<div className="log-explorer-query-container">
+					<div>
 						<ExplorerCard sourcepage={DataSource.LOGS}>
 							<LogExplorerQuerySection selectedView={selectedView} />
 						</ExplorerCard>
-					</Col>
-					<Col xs={24}>
+					</div>
+					<div className="logs-explorer-views">
 						<LogsExplorerViews
 							selectedView={selectedView}
 							showHistogram={showHistogram}
 						/>
-					</Col>
-				</Row>
+					</div>
+				</div>
 			</WrapperStyled>
 		</ErrorBoundary>
 	);

frontend/src/pages/LogsExplorer/styles.ts

@@ -3,6 +3,9 @@ import { themeColors } from 'constants/theme';
 import styled from 'styled-components';
 
 export const WrapperStyled = styled.div`
+	display: flex;
+	flex-direction: column;
+	flex: 1;
 	color: ${themeColors.lightWhite};
 `;
 

frontend/src/pages/LogsModulePage/LogsModulePage.styles.scss

@@ -5,6 +5,14 @@
 	// 	margin: 0 -1rem;
 	// }
 
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+
+	.ant-tabs {
+		flex: 1;
+	}
+
 	.ant-tabs-nav {
 		padding: 0 16px;
 		margin-bottom: 0px;
@@ -14,6 +22,22 @@
 		}
 	}
 
+	.ant-tabs-content-holder {
+		display: flex;
+
+		.ant-tabs-content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.ant-tabs-tabpane {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+	}
+
 	.tab-item {
 		display: flex;
 		justify-content: center;