Fix: trace details bugfixes (#9116)

* fix: make the trace details sidebar scrollable

* fix: fix the long value overflowing trace details attributes

* fix: fix the layout issues in trace details v2

* Revert "fix: make the trace details sidebar scrollable"

This reverts commit 469022e.

* fix: make the trace details sidebar scrollable

* fix: make the attribute value take 100% width

---------

Co-authored-by: Nityananda Gohain <[email protected]>

Author: ahmadshaheer

frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.styles.scss

@@ -58,12 +58,16 @@
 				padding: 2px 8px;
 				align-items: center;
 				width: fit-content;
-				max-width: calc(100% - 120px); /* Reserve space for action buttons */
+				max-width: 100%;
 				gap: 8px;
 				border-radius: 50px;
 				border: 1px solid var(--bg-slate-400);
 				background: var(--bg-slate-500);
 
+				.copy-wrapper {
+					overflow: hidden;
+				}
+
 				.item-value {
 					color: var(--bg-vanilla-400);
 					font-family: Inter;

frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.tsx

@@ -97,11 +97,13 @@ function Attributes(props: IAttributesProps): JSX.Element {
 						</div>
 						<div className="value-wrapper">
 							<Tooltip title={item.value}>
-								<CopyClipboardHOC entityKey={item.value} textToCopy={item.value}>
-									<Typography.Text className="item-value" ellipsis>
-										{item.value}
-									</Typography.Text>{' '}
-								</CopyClipboardHOC>
+								<div className="copy-wrapper">
+									<CopyClipboardHOC entityKey={item.value} textToCopy={item.value}>
+										<Typography.Text className="item-value" ellipsis>
+											{item.value}
+										</Typography.Text>
+									</CopyClipboardHOC>
+								</div>
 							</Tooltip>
 							<AttributeActions
 								record={item}

frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.styles.scss

@@ -3,7 +3,7 @@
 	flex-direction: column;
 	height: calc(100vh - 44px); //44px -> trace details top bar
 	border-left: 1px solid var(--bg-slate-400);
-	overflow-y: auto;
+	overflow-y: auto !important;
 	&:not(&-docked) {
 		min-width: 450px;
 	}

frontend/src/pages/TraceDetailV2/TraceDetailV2.tsx

@@ -127,7 +127,11 @@ function TraceDetailsV2(): JSX.Element {
 	];
 
 	return (
-		<ResizablePanelGroup direction="horizontal" autoSaveId="trace-drawer">
+		<ResizablePanelGroup
+			direction="horizontal"
+			autoSaveId="trace-drawer"
+			className="trace-layout"
+		>
 			<ResizablePanel minSize={20} maxSize={80} className="trace-left-content">
 				<TraceMetadata
 					traceID={traceId}