From b29359dee04fe45e81f0362a73a03bd592470bfb Mon Sep 17 00:00:00 2001
From: Shaheer Kochai <ashaheerki@gmail.com>
Date: Mon, 16 Dec 2024 11:30:40 +0430
Subject: [PATCH] fix: improve traces table ux by making the table scrollable
 (#6423)

* fix: improve traces table ux by making the table scrollable

* chore: remove explicit scroll.x and modify the existing scroll.x from true to max-content

* fix(Traces Explorer): make trace explorer card full-width when collapsed, resizable when expanded
---
 frontend/src/container/TracesExplorer/ListView/index.tsx   | 2 +-
 .../src/pages/TracesExplorer/TracesExplorer.styles.scss    | 3 +++
 frontend/src/pages/TracesExplorer/index.tsx                | 7 ++++++-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/container/TracesExplorer/ListView/index.tsx b/frontend/src/container/TracesExplorer/ListView/index.tsx
index bcf18ff61c..e59906c075 100644
--- a/frontend/src/container/TracesExplorer/ListView/index.tsx
+++ b/frontend/src/container/TracesExplorer/ListView/index.tsx
@@ -154,7 +154,7 @@ function ListView({ isFilterApplied }: ListViewProps): JSX.Element {
 				<ResizeTable
 					tableLayout="fixed"
 					pagination={false}
-					scroll={{ x: true }}
+					scroll={{ x: 'max-content' }}
 					loading={isFetching}
 					style={tableStyles}
 					dataSource={transformedQueryTableData}
diff --git a/frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss b/frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss
index 4323f901d5..91affeef40 100644
--- a/frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss
+++ b/frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss
@@ -59,6 +59,9 @@
 
 		border-color: var(--bg-slate-400);
 	}
+	.trace-explorer.filters-expanded {
+		width: calc(100% - 260px);
+	}
 }
 
 .lightMode {
diff --git a/frontend/src/pages/TracesExplorer/index.tsx b/frontend/src/pages/TracesExplorer/index.tsx
index b865fd02bd..c61a3fc583 100644
--- a/frontend/src/pages/TracesExplorer/index.tsx
+++ b/frontend/src/pages/TracesExplorer/index.tsx
@@ -5,6 +5,7 @@ import * as Sentry from '@sentry/react';
 import { Button, Card, Tabs, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
 import axios from 'axios';
+import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
@@ -244,7 +245,11 @@ function TracesExplorer(): JSX.Element {
 				<Card className="filter" hidden={!isOpen}>
 					<Filter setOpen={setOpen} />
 				</Card>
-				<Card className="trace-explorer">
+				<Card
+					className={cx('trace-explorer', {
+						'filters-expanded': isOpen,
+					})}
+				>
 					<div className={`trace-explorer-header ${isOpen ? 'single-child' : ''}`}>
 						{!isOpen && (
 							<Tooltip title="Expand filters" placement="right">