From f22d5f0fbd0cb63372f861828d86088ae72bf02b Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Wed, 23 Mar 2022 11:44:37 +0530
Subject: [PATCH] fix: top endpoints table overflow

---
 .../src/container/MetricsApplication/Tabs/Application.tsx   | 6 +++---
 frontend/src/container/MetricsApplication/Tabs/styles.ts    | 5 +++++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/container/MetricsApplication/Tabs/Application.tsx b/frontend/src/container/MetricsApplication/Tabs/Application.tsx
index 09370793ab..bc072d5c97 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Application.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Application.tsx
@@ -15,7 +15,7 @@ import MetricReducer from 'types/reducer/metrics';
 
 import { Card, Col, GraphContainer, GraphTitle, Row } from '../styles';
 import TopEndpointsTable from '../TopEndpointsTable';
-import { Button } from './styles';
+import { Button, TableContainerCard } from './styles';
 
 function Application({ getWidget }: DashboardProps): JSX.Element {
 	const { servicename } = useParams<{ servicename?: string }>();
@@ -232,9 +232,9 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
 				</Col>
 
 				<Col span={12}>
-					<Card>
+					<TableContainerCard>
 						<TopEndpointsTable data={topEndPoints} />
-					</Card>
+					</TableContainerCard>
 				</Col>
 			</Row>
 		</>
diff --git a/frontend/src/container/MetricsApplication/Tabs/styles.ts b/frontend/src/container/MetricsApplication/Tabs/styles.ts
index 017ab95419..500e2b9b74 100644
--- a/frontend/src/container/MetricsApplication/Tabs/styles.ts
+++ b/frontend/src/container/MetricsApplication/Tabs/styles.ts
@@ -1,6 +1,8 @@
 import { Button as ButtonComponent } from 'antd';
 import styled from 'styled-components';
 
+import { Card } from '../styles';
+
 export const Button = styled(ButtonComponent)`
 	&&& {
 		position: absolute;
@@ -8,3 +10,6 @@ export const Button = styled(ButtonComponent)`
 		display: none;
 	}
 `;
+export const TableContainerCard = styled(Card)`
+	overflow-x: scroll;
+`;