From 8cd60b5c6080845611e28758349ca417d783695b Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Sat, 22 Jun 2024 15:41:42 +0530
Subject: [PATCH] fix: handle overflow for attribute tooltips in trace details
 page (#5313)

---
 .../SelectedSpanDetails/Tags/Tag.tsx          |  9 ++++-
 .../SelectedSpanDetails/Tags/Tags.styles.scss | 37 +++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/Tags.styles.scss

diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/Tag.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/Tag.tsx
index 293b6fc993..f913dd6cbb 100644
--- a/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/Tag.tsx
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/Tag.tsx
@@ -1,3 +1,5 @@
+import './Tags.styles.scss';
+
 import { Tooltip } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Fragment, useMemo } from 'react';
@@ -26,7 +28,12 @@ function Tag({ tags, onToggleHandler, setText }: TagProps): JSX.Element {
 				<Container>
 					<CustomSubTitle>{tags.key}</CustomSubTitle>
 					<SubTextContainer isDarkMode={isDarkMode}>
-						<Tooltip overlay={(): string => value}>
+						<Tooltip
+							overlayClassName="tagTooltip"
+							placement="left"
+							autoAdjustOverflow
+							title={value}
+						>
 							<CustomSubText
 								ellipsis={{
 									rows: isEllipsed ? 2 : 0,
diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/Tags.styles.scss b/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/Tags.styles.scss
new file mode 100644
index 0000000000..255bcfca12
--- /dev/null
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/Tags/Tags.styles.scss
@@ -0,0 +1,37 @@
+.tagTooltip {
+	.ant-tooltip-content {
+		max-height: 300px;
+		overflow-x: hidden;
+		overflow-y: auto;
+		padding: 8px;
+
+		background-color: var(--bg-slate-400);
+		margin-bottom: 8px;
+	}
+
+	.ant-tooltip-inner {
+		box-shadow: none;
+	}
+}
+
+.lightMode {
+	.tagTooltip {
+		.ant-tooltip-content {
+			background-color: var(--bg-vanilla-300);
+		}
+
+		.ant-tooltip-inner {
+			box-shadow: none;
+			background-color: var(--bg-vanilla-300);
+			color: var(--bg-ink-200);
+		}
+
+		.ant-tooltip-arrow {
+			border-top-color: var(--bg-vanilla-300) !important;
+		}
+
+		&.ant-tooltip {
+			--antd-arrow-background-color: var(--bg-vanilla-300) !important;
+		}
+	}
+}