fix: overflow issue in service page graphs (#4300)

SigNoz · Dec 29, 2023 · d688399 · d688399
1 parent cfc239e
commit d688399
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 13 deletions.
diff --git a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
@@ -1,3 +1,5 @@
+import '../GridCardLayout.styles.scss';
+
 import { Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import { ToggleGraphProps } from 'components/Graph/types';

diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
@@ -32,19 +32,13 @@ import {
 	errorPercentage,
 	operationPerSec,
 } from '../MetricsPageQueries/OverviewQueries';
-import {
-	Card,
-	Col,
-	ColApDexContainer,
-	ColErrorContainer,
-	Row,
-} from '../styles';
+import { Col, ColApDexContainer, ColErrorContainer, Row } from '../styles';
 import ApDex from './Overview/ApDex';
 import ServiceOverview from './Overview/ServiceOverview';
 import TopLevelOperation from './Overview/TopLevelOperations';
 import TopOperation from './Overview/TopOperation';
 import TopOperationMetrics from './Overview/TopOperationMetrics';
-import { Button } from './styles';
+import { Button, Card } from './styles';
 import { IServiceName } from './types';
 import {
 	handleNonInQueryRange,
@@ -276,7 +270,7 @@ function Application(): JSX.Element {
 
 				<Col span={12}>
 					<Card>
-						{isSpanMetricEnabled ? <TopOperationMetrics /> : <TopOperation />}
+						{isSpanMetricEnabled ? <TopOperationMetrics /> : <TopOperation />}{' '}
 					</Card>
 				</Col>
 			</Row>

diff --git a/frontend/src/container/MetricsApplication/Tabs/styles.ts b/frontend/src/container/MetricsApplication/Tabs/styles.ts
@@ -1,4 +1,4 @@
-import { Button as ButtonComponent } from 'antd';
+import { Button as ButtonComponent, Card as CardComponent } from 'antd';
 import styled from 'styled-components';
 
 export const Button = styled(ButtonComponent)`
@@ -8,3 +8,9 @@ export const Button = styled(ButtonComponent)`
 		display: none;
 	}
 `;
+
+export const Card = styled(CardComponent)`
+	.ant-card-body {
+		padding: 10px;
+	}
+`;
diff --git a/frontend/src/container/MetricsApplication/styles.ts b/frontend/src/container/MetricsApplication/styles.ts
@@ -8,12 +8,13 @@ import styled from 'styled-components';
 
 export const Card = styled(CardComponent)`
 	&&& {
-		padding: 10px;
+		height: 40vh;
+		overflow: hidden;
 	}
 
 	.ant-card-body {
+		height: calc(100% - 40px);
 		padding: 0;
-		min-height: 40vh;
 	}
 `;
 
@@ -38,7 +39,8 @@ export const ColErrorContainer = styled(ColComponent)`
 `;
 
 export const GraphContainer = styled.div`
-	height: 40vh;
+	min-height: calc(40vh - 40px);
+	height: calc(100% - 40px);
 `;
 
 export const GraphTitle = styled(Typography)`