Merge branch 'main' into fix-integration-test

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.module.scss

@@ -1,89 +0,0 @@
-.body {
-	padding: 12px 6px;
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	overflow: hidden;
-	background: var(--l1-background);
-
-	// TabsRoot — last direct child div
-	> div:last-child {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-		overflow: hidden;
-	}
-
-	[role='tablist'] {
-		flex-shrink: 0;
-	}
-
-	// Tabs library wrapper — scoped by `.body` so the global match is contained.
-	:global([class*='tabs__list-wrapper']) {
-		padding-left: 0 !important;
-	}
-}
-
-.tabsScroll {
-	flex: 1;
-	min-height: 0;
-	overflow-y: auto;
-	scrollbar-width: none;
-}
-
-.list {
-	display: grid;
-	grid-template-columns: auto auto 1fr;
-	gap: 4px 8px;
-	padding: 8px 0;
-	align-items: center;
-}
-
-.dot {
-	width: 8px;
-	height: 8px;
-	border-radius: 2px;
-}
-
-.serviceName {
-	font-size: 13px;
-	color: var(--l1-foreground);
-	word-break: break-word;
-}
-
-.barCell {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.bar {
-	flex: 1;
-	height: 6px;
-	background: var(--l3-background);
-	border-radius: 3px;
-	min-width: 40px;
-}
-
-.barFill {
-	height: 100%;
-	border-radius: 3px;
-}
-
-.value {
-	flex-shrink: 0;
-	text-align: right;
-	font-size: 13px;
-	font-weight: 500;
-	color: var(--l1-foreground);
-}
-
-.valueWide {
-	min-width: 55px;
-}
-
-.valueNarrow {
-	min-width: 25px;
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.styles.scss

@@ -0,0 +1,96 @@
+.analytics-panel {
+	&__body {
+		padding: 12px 6px;
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		overflow: hidden;
+		background: var(--l1-background);
+
+		// TabsRoot — last direct child div
+		> div:last-child {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+			overflow: hidden;
+		}
+
+		[role='tablist'] {
+			flex-shrink: 0;
+		}
+	}
+
+	&__tabs-scroll {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		scrollbar-width: none;
+	}
+
+	&__list {
+		display: grid;
+		grid-template-columns: auto auto 1fr;
+		gap: 4px 8px;
+		padding: 8px 0;
+		align-items: center;
+	}
+
+	&__dot {
+		width: 8px;
+		height: 8px;
+		border-radius: 2px;
+	}
+
+	&__service-name {
+		font-size: 13px;
+		color: var(--l1-foreground);
+		word-break: break-word;
+	}
+
+	&__bar-cell {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	&__bar {
+		flex: 1;
+		height: 6px;
+		background: var(--l3-background);
+		border-radius: 3px;
+		min-width: 40px;
+
+		&--small {
+			max-width: 80px;
+			flex: 0 0 80px;
+		}
+	}
+
+	&__bar-fill {
+		height: 100%;
+		border-radius: 3px;
+	}
+
+	&__value {
+		flex-shrink: 0;
+		text-align: right;
+		font-size: 13px;
+		font-weight: 500;
+		color: var(--l1-foreground);
+
+		&--wide {
+			min-width: 55px;
+		}
+
+		&--narrow {
+			min-width: 25px;
+		}
+	}
+
+	// Tabs root
+	[class*='tabs__list-wrapper'] {
+		padding-left: 0 !important;
+	}
+}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.tsx

@@ -5,7 +5,6 @@ import {
 	TabsRoot,
 	TabsTrigger,
 } from '@signozhq/ui/tabs';
-import cx from 'classnames';
 import { DetailsHeader } from 'components/DetailsPanel';
 import { themeColors } from 'constants/theme';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
@@ -17,7 +16,7 @@ import {
 	getAggregationMap as findAggregationMap,
 } from '../../utils/aggregations';
 
-import styles from './AnalyticsPanel.module.scss';
+import './AnalyticsPanel.styles.scss';
 
 interface AnalyticsPanelProps {
 	isOpen: boolean;
@@ -87,6 +86,7 @@ function AnalyticsPanel({
 	return (
 		<FloatingPanel
 			isOpen
+			className="analytics-panel"
 			width={PANEL_WIDTH}
 			height={window.innerHeight - PANEL_MARGIN_TOP - PANEL_MARGIN_BOTTOM}
 			defaultPosition={{
@@ -110,7 +110,7 @@ function AnalyticsPanel({
 				className="floating-panel__drag-handle"
 			/>
 
-			<div className={styles.body}>
+			<div className="analytics-panel__body">
 				<TabsRoot defaultValue="exec-time">
 					<TabsList variant="secondary">
 						<TabsTrigger value="exec-time" variant="secondary">
@@ -121,30 +121,33 @@ function AnalyticsPanel({
 						</TabsTrigger>
 					</TabsList>
 
-					<div className={styles.tabsScroll}>
+					<div className="analytics-panel__tabs-scroll">
 						<TabsContent value="exec-time">
-							<div className={styles.list}>
+							<div className="analytics-panel__list">
 								{execTimeRows.map((row) => (
 									<>
 										<div
 											key={`${row.group}-dot`}
-											className={styles.dot}
+											className="analytics-panel__dot"
 											style={{ backgroundColor: row.color }}
 										/>
-										<span key={`${row.group}-name`} className={styles.serviceName}>
+										<span
+											key={`${row.group}-name`}
+											className="analytics-panel__service-name"
+										>
 											{row.group}
 										</span>
-										<div key={`${row.group}-bar`} className={styles.barCell}>
-											<div className={styles.bar}>
+										<div key={`${row.group}-bar`} className="analytics-panel__bar-cell">
+											<div className="analytics-panel__bar">
 												<div
-													className={styles.barFill}
+													className="analytics-panel__bar-fill"
 													style={{
 														width: `${Math.min(row.percentage, 100)}%`,
 														backgroundColor: row.color,
 													}}
 												/>
 											</div>
-											<span className={cx(styles.value, styles.valueWide)}>
+											<span className="analytics-panel__value analytics-panel__value--wide">
 												{row.percentage.toFixed(2)}%
 											</span>
 										</div>
@@ -154,28 +157,31 @@ function AnalyticsPanel({
 						</TabsContent>
 
 						<TabsContent value="spans">
-							<div className={styles.list}>
+							<div className="analytics-panel__list">
 								{spanCountRows.map((row) => (
 									<>
 										<div
 											key={`${row.group}-dot`}
-											className={styles.dot}
+											className="analytics-panel__dot"
 											style={{ backgroundColor: row.color }}
 										/>
-										<span key={`${row.group}-name`} className={styles.serviceName}>
+										<span
+											key={`${row.group}-name`}
+											className="analytics-panel__service-name"
+										>
 											{row.group}
 										</span>
-										<div key={`${row.group}-bar`} className={styles.barCell}>
-											<div className={styles.bar}>
+										<div key={`${row.group}-bar`} className="analytics-panel__bar-cell">
+											<div className="analytics-panel__bar">
 												<div
-													className={styles.barFill}
+													className="analytics-panel__bar-fill"
 													style={{
 														width: `${(row.count / row.max) * 100}%`,
 														backgroundColor: row.color,
 													}}
 												/>
 											</div>
-											<span className={cx(styles.value, styles.valueNarrow)}>
+											<span className="analytics-panel__value analytics-panel__value--narrow">
 												{row.count}
 											</span>
 										</div>

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/LinkedSpans/LinkedSpans.module.scss

@@ -1,26 +0,0 @@
-.root {
-	position: relative;
-}
-
-.toggle {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	background: none;
-	border: none;
-	padding: 0;
-	cursor: pointer;
-	color: inherit;
-	font: inherit;
-}
-
-.label {
-	white-space: nowrap;
-}
-
-.list {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-	padding: 12px 0;
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/LinkedSpans/LinkedSpans.styles.scss

@@ -0,0 +1,34 @@
+.linked-spans {
+	position: relative;
+
+	&__toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		background: none;
+		border: none;
+		padding: 0;
+		cursor: pointer;
+		color: inherit;
+		font: inherit;
+	}
+
+	&__label {
+		white-space: nowrap;
+	}
+
+	&__chevron {
+		transition: transform 0.15s ease;
+
+		&--open {
+			transform: rotate(90deg);
+		}
+	}
+
+	&__list {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		padding: 12px 0;
+	}
+}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/LinkedSpans/LinkedSpans.tsx

@@ -5,7 +5,7 @@ import { Badge } from '@signozhq/ui/badge';
 import ROUTES from 'constants/routes';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 
-import styles from './LinkedSpans.module.scss';
+import './LinkedSpans.styles.scss';
 
 interface SpanReference {
 	traceId: string;
@@ -56,12 +56,12 @@ export function LinkedSpansToggle({
 	toggleOpen: () => void;
 }): JSX.Element {
 	if (count === 0) {
-		return <span className={styles.label}>0 linked spans</span>;
+		return <span className="linked-spans__label">0 linked spans</span>;
 	}
 
 	return (
-		<button type="button" className={styles.toggle} onClick={toggleOpen}>
-			<span className={styles.label}>
+		<button type="button" className="linked-spans__toggle" onClick={toggleOpen}>
+			<span className="linked-spans__label">
 				{count} linked span{count !== 1 ? 's' : ''}
 			</span>
 			{isOpen ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
@@ -87,7 +87,7 @@ export function LinkedSpansPanel({
 	}
 
 	return (
-		<div className={styles.list}>
+		<div className="linked-spans__list">
 			{linkedSpans.map((item) => (
 				<KeyValueLabel
 					key={item.spanId}
@@ -108,7 +108,7 @@ function LinkedSpans({ references }: LinkedSpansProps): JSX.Element {
 	const { linkedSpans, count, isOpen, toggleOpen } = useLinkedSpans(references);
 
 	return (
-		<div className={styles.root}>
+		<div className="linked-spans">
 			<LinkedSpansToggle count={count} isOpen={isOpen} toggleOpen={toggleOpen} />
 			<LinkedSpansPanel linkedSpans={linkedSpans} isOpen={isOpen} />
 		</div>

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.module.scss

@@ -1,146 +0,0 @@
-.root {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-}
-
-.body {
-	padding: 12px;
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	overflow-y: auto;
-	scrollbar-width: none;
-	background: var(--l1-background);
-	font-size: 14px;
-	gap: 16px;
-
-	// DataViewer keeps its global `.data-viewer` class — give it a min-height
-	// so the tab area doesn't collapse on short content.
-	:global(.data-viewer) {
-		min-height: 500px;
-	}
-}
-
-.detailsSection {
-	flex-shrink: 0;
-	min-width: 0;
-}
-
-.tabsSection {
-	flex: 1;
-	min-width: 0;
-	max-height: 100%;
-	min-height: 400px;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-
-	// TabsRoot — direct child of tabs-section
-	> div {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-		overflow: hidden;
-	}
-
-	[role='tablist'] {
-		flex-shrink: 0;
-	}
-
-	[class*='tabs__list-wrapper'] {
-		padding-left: 0 !important;
-	}
-}
-
-.tabsScroll {
-	flex: 1;
-	min-height: 0;
-	overflow-y: auto;
-	scrollbar-width: none;
-	display: flex;
-	flex-direction: column;
-
-	[role='tabpanel'] {
-		padding: 0;
-		flex: 1;
-		min-height: 0;
-	}
-}
-
-.spanRow {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: 8px;
-	justify-content: space-between;
-}
-
-.spanInfo {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 4px 16px;
-	padding: 8px 0;
-}
-
-.spanInfoItem {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	font-size: 13px;
-	color: var(--l2-foreground);
-	white-space: nowrap;
-}
-
-.highlightedOptions {
-	padding: 8px 0;
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 0;
-
-	// KeyValueLabel uses a global `.key-value-label` root; constrain it
-	// inside the two-column grid so values can ellipsize cleanly.
-	:global(.key-value-label) {
-		width: auto;
-		min-width: 0;
-		overflow: hidden;
-	}
-}
-
-.serviceDot {
-	display: inline-block;
-	width: 6px;
-	height: 6px;
-	border-radius: 50%;
-	background: var(--accent-forest);
-	flex-shrink: 0;
-}
-
-.traceId {
-	color: var(--accent-primary);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	display: block;
-}
-
-.traceIdCopy {
-	display: block;
-	max-width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	padding: 0;
-	height: auto;
-	justify-content: flex-start;
-}
-
-// Tooltip is rendered in a portal but the SpanDetailsPanel can be docked as a
-// FloatingPanel (z-index 999), which would otherwise sit on top of the default
-// tooltip (z-index 50). Bump the tooltip above the panel.
-.dockToggleTooltip {
-	--tooltip-z-index: 1000;
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.styles.scss

@@ -0,0 +1,170 @@
+.span-details-panel {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+
+	&__header-nav {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+	}
+
+	&__body {
+		padding: 12px;
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		scrollbar-width: none;
+		background: var(--l1-background);
+		font-size: 14px;
+		gap: 16px;
+
+		.data-viewer {
+			min-height: 500px;
+		}
+	}
+
+	&__details-section {
+		flex-shrink: 0;
+		min-width: 0;
+	}
+
+	&__tabs-section {
+		flex: 1;
+		min-width: 0;
+		max-height: 100%;
+		min-height: 400px;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+
+		// TabsRoot — direct child of tabs-section
+		> div {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+			overflow: hidden;
+		}
+
+		[role='tablist'] {
+			flex-shrink: 0;
+		}
+
+		[class*='tabs__list-wrapper'] {
+			padding-left: 0 !important;
+		}
+	}
+
+	&__tabs-scroll {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		scrollbar-width: none;
+		display: flex;
+		flex-direction: column;
+
+		[role='tabpanel'] {
+			padding: 0;
+			flex: 1;
+			min-height: 0;
+		}
+	}
+
+	&__span-row {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 8px;
+		justify-content: space-between;
+	}
+
+	&__span-info {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 4px 16px;
+		padding: 8px 0;
+	}
+
+	&__span-info-item {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13px;
+		color: var(--l2-foreground);
+		white-space: nowrap;
+	}
+
+	&__highlighted-options {
+		padding: 8px 0;
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 0;
+
+		.key-value-label {
+			width: auto;
+			min-width: 0;
+			overflow: hidden;
+		}
+	}
+
+	&__service-dot {
+		display: inline-block;
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background: var(--accent-forest);
+		flex-shrink: 0;
+	}
+
+	&__trace-id {
+		color: var(--accent-primary);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		display: block;
+	}
+
+	&__trace-id-copy {
+		display: block;
+		max-width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		padding: 0;
+		height: auto;
+		justify-content: flex-start;
+	}
+
+	&__key-attributes {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		padding: 8px 0;
+
+		&-label {
+			font-size: var(--font-size-xs);
+			font-weight: var(--font-weight-medium);
+			color: var(--l2-foreground);
+			text-transform: uppercase;
+			letter-spacing: 0.48px;
+			line-height: var(--line-height-20);
+		}
+
+		&-chips {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 6px;
+		}
+	}
+}
+
+// Tooltip is rendered in a portal but the SpanDetailsPanel can be docked as a
+// FloatingPanel (z-index 999), which would otherwise sit on top of the default
+// tooltip (z-index 50). Bump the tooltip above the panel.
+.dock-toggle-tooltip {
+	--tooltip-z-index: 1000;
+}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.tsx

@@ -72,7 +72,7 @@ import SpanPercentileBadge from './SpanPercentile/SpanPercentileBadge';
 import SpanPercentilePanel from './SpanPercentile/SpanPercentilePanel';
 import useSpanPercentile from './SpanPercentile/useSpanPercentile';
 
-import styles from './SpanDetailsPanel.module.scss';
+import './SpanDetailsPanel.styles.scss';
 
 interface SpanDetailsPanelProps {
 	panelState: DetailsPanelState;
@@ -275,9 +275,9 @@ function SpanDetailsContent({
 	// }, [selectedSpan]);
 
 	return (
-		<div className={styles.body}>
-			<div className={styles.detailsSection}>
-				<div className={styles.spanRow}>
+		<div className="span-details-panel__body">
+			<div className="span-details-panel__details-section">
+				<div className="span-details-panel__span-row">
 					<KeyValueLabel
 						badgeKey="Span name"
 						badgeValue={selectedSpan.name}
@@ -296,8 +296,8 @@ function SpanDetailsContent({
 				<SpanPercentilePanel selectedSpan={selectedSpan} percentile={percentile} />
 
 				{/* Span info: exec time + start time */}
-				<div className={styles.spanInfo}>
-					<div className={styles.spanInfoItem}>
+				<div className="span-details-panel__span-info">
+					<div className="span-details-panel__span-info-item">
 						<Timer size={14} />
 						<span>
 							{getYAxisFormattedValue(`${selectedSpan.duration_nano / 1000000}`, 'ms')}
@@ -316,13 +316,13 @@ function SpanDetailsContent({
 							)}
 						</span>
 					</div>
-					<div className={styles.spanInfoItem}>
+					<div className="span-details-panel__span-info-item">
 						<CalendarClock size={14} />
 						<span>
 							{dayjs(selectedSpan.timestamp).format('HH:mm:ss — MMM D, YYYY')}
 						</span>
 					</div>
-					<div className={styles.spanInfoItem}>
+					<div className="span-details-panel__span-info-item">
 						<Link2 size={14} />
 						<LinkedSpansToggle
 							count={linkedSpans.count}
@@ -338,7 +338,7 @@ function SpanDetailsContent({
 				/>
 
 				{/* Step 6: HighlightedOptions */}
-				<div className={styles.highlightedOptions}>
+				<div className="span-details-panel__highlighted-options">
 					{HIGHLIGHTED_OPTIONS.map((option) => {
 						const rendered = option.render(selectedSpan);
 						if (!rendered) {
@@ -382,7 +382,7 @@ function SpanDetailsContent({
 				{/* Step 8: MiniTraceContext */}
 			</div>
 
-			<div className={styles.tabsSection}>
+			<div className="span-details-panel__tabs-section">
 				{/* Step 9: ContentTabs */}
 				<TabsRoot defaultValue="overview">
 					<TabsList variant="secondary">
@@ -402,7 +402,7 @@ function SpanDetailsContent({
 						)}
 					</TabsList>
 
-					<div className={styles.tabsScroll}>
+					<div className="span-details-panel__tabs-scroll">
 						<TabsContent value="overview">
 							<DataViewer
 								data={spanDisplayData}
@@ -512,7 +512,7 @@ function SpanDetailsPanel({
 									{isDocked ? <Dock size={14} /> : <PanelBottom size={14} />}
 								</Button>
 							</TooltipTrigger>
-							<TooltipContent className={styles.dockToggleTooltip}>
+							<TooltipContent className="dock-toggle-tooltip">
 								{isDocked ? 'Open as floating panel' : 'Dock at the bottom'}
 							</TooltipContent>
 						</Tooltip>
@@ -546,7 +546,7 @@ function SpanDetailsPanel({
 					traceEndTime={traceEndTime}
 				/>
 			) : (
-				<div className={styles.body}>
+				<div className="span-details-panel__body">
 					<Skeleton active paragraph={{ rows: 6 }} title={{ width: '60%' }} />
 				</div>
 			)}
@@ -554,7 +554,7 @@ function SpanDetailsPanel({
 	);
 
 	if (variant === SpanDetailVariant.DOCKED) {
-		return <div className={styles.root}>{content}</div>;
+		return <div className="span-details-panel">{content}</div>;
 	}
 
 	if (variant === SpanDetailVariant.DRAWER) {
@@ -562,7 +562,7 @@ function SpanDetailsPanel({
 			<DetailsPanelDrawer
 				isOpen={panelState.isOpen}
 				onClose={panelState.close}
-				className={styles.root}
+				className="span-details-panel"
 			>
 				{content}
 			</DetailsPanelDrawer>
@@ -572,7 +572,7 @@ function SpanDetailsPanel({
 	return (
 		<FloatingPanel
 			isOpen={panelState.isOpen}
-			className={styles.root}
+			className="span-details-panel"
 			width={PANEL_WIDTH}
 			minWidth={480}
 			height={window.innerHeight - PANEL_MARGIN_TOP - PANEL_MARGIN_BOTTOM}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentile.styles.scss

@@ -0,0 +1,258 @@
+// Badge — wraps a KeyValueLabel, clickable to toggle panel
+.span-percentile-badge {
+	cursor: pointer;
+
+	// Override key color for the percentile value (p99)
+	.key-value-label__key {
+		color: var(--destructive);
+	}
+
+	&__loader {
+		display: inline-flex;
+		align-items: center;
+		padding: 2px 4px;
+		color: var(--foreground);
+	}
+
+	&__value {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	&__icon {
+		flex-shrink: 0;
+		color: var(--l2-foreground);
+	}
+}
+
+// Panel — collapsible, renders below the row
+.span-percentile-panel {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	border: 1px solid var(--l1-border);
+	border-radius: 4px;
+	filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
+	backdrop-filter: blur(20px);
+	margin: 8px 16px;
+
+	&__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+		padding: 8px 12px;
+		border-bottom: 1px solid var(--l1-border);
+
+		&-text {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			cursor: pointer;
+		}
+
+		&-icon {
+			color: var(--l2-foreground);
+		}
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		padding: 8px;
+
+		&-title {
+			font-size: var(--font-size-sm);
+			line-height: var(--line-height-20);
+		}
+
+		&-highlight {
+			color: var(--destructive);
+		}
+
+		&-loader {
+			display: inline-flex;
+			align-items: flex-end;
+			margin: 0 4px;
+			line-height: 18px;
+		}
+	}
+
+	&__timerange {
+		width: 100%;
+
+		&-select {
+			width: 100%;
+			margin-top: 8px;
+			margin-bottom: 16px;
+
+			.ant-select-selector {
+				border-radius: 50px;
+				border: 1px solid var(--l1-border);
+				background: var(--l1-background);
+				color: var(--l1-foreground);
+				font-size: 12px;
+				height: 32px;
+			}
+		}
+	}
+
+	&__table {
+		&-header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 8px;
+
+			&-text {
+				color: var(--l1-foreground);
+				font-size: 11px;
+				font-weight: 500;
+				line-height: 20px;
+				text-transform: uppercase;
+			}
+		}
+
+		&-rows {
+			margin-top: 8px;
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+		}
+
+		&-skeleton {
+			.ant-skeleton-title {
+				width: 100% !important;
+				margin-top: 0 !important;
+			}
+
+			.ant-skeleton-paragraph {
+				margin-top: 8px;
+
+				& > li + li {
+					margin-top: 10px;
+					width: 100% !important;
+				}
+			}
+		}
+
+		&-row {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 12px;
+			padding: 0 4px;
+
+			&-key {
+				flex: 0 0 auto;
+				color: var(--l1-foreground);
+				font-size: 12px;
+				font-weight: 500;
+				line-height: 20px;
+			}
+
+			&-value {
+				color: var(--l2-foreground);
+				font-size: 12px;
+				line-height: 20px;
+			}
+
+			&-dash {
+				flex: 1;
+				height: 0;
+				margin: 0 8px;
+				border-top: 1px solid transparent;
+				border-image: repeating-linear-gradient(
+						to right,
+						var(--l1-border) 0,
+						var(--l1-border) 10px,
+						transparent 10px,
+						transparent 20px
+					)
+					1 stretch;
+			}
+
+			&--current {
+				border-radius: 2px;
+				background: rgba(78, 116, 248, 0.2);
+
+				.span-percentile-panel__table-row-key {
+					color: var(--text-robin-300);
+				}
+
+				.span-percentile-panel__table-row-dash {
+					border-image: repeating-linear-gradient(
+							to right,
+							#abbdff 0,
+							#abbdff 10px,
+							transparent 10px,
+							transparent 20px
+						)
+						1 stretch;
+				}
+
+				.span-percentile-panel__table-row-value {
+					color: var(--text-robin-400);
+				}
+			}
+		}
+	}
+
+	&__resource-selector {
+		overflow: hidden;
+		width: calc(100% + 16px);
+		position: absolute;
+		top: 32px;
+		left: -8px;
+		z-index: 1000;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: var(--l1-background);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+
+		&-header {
+			border-bottom: 1px solid var(--l1-border);
+		}
+
+		&-input {
+			border-radius: 0;
+			border: none !important;
+			box-shadow: none !important;
+			height: 36px;
+		}
+
+		&-items {
+			height: 200px;
+			overflow-y: auto;
+
+			&::-webkit-scrollbar {
+				width: 0.3rem;
+				height: 0.3rem;
+			}
+
+			&::-webkit-scrollbar-track {
+				background: transparent;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background: var(--l3-background);
+			}
+		}
+
+		&-item {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			padding: 8px 12px;
+
+			&-value {
+				color: var(--l1-foreground);
+				font-size: 13px;
+				line-height: 20px;
+			}
+		}
+	}
+}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentileBadge.module.scss

@@ -1,28 +0,0 @@
-// Badge — wraps a KeyValueLabel, clickable to toggle panel
-.root {
-	cursor: pointer;
-
-	// KeyValueLabel renders its key with a global class; recolor only the badge
-	// instance inside this badge wrapper.
-	:global(.key-value-label__key) {
-		color: var(--destructive);
-	}
-}
-
-.loader {
-	display: inline-flex;
-	align-items: center;
-	padding: 2px 4px;
-	color: var(--foreground);
-}
-
-.value {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-}
-
-.icon {
-	flex-shrink: 0;
-	color: var(--l2-foreground);
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentileBadge.tsx

@@ -3,7 +3,7 @@ import KeyValueLabel from 'periscope/components/KeyValueLabel';
 
 import { UseSpanPercentileReturn } from './useSpanPercentile';
 
-import styles from './SpanPercentileBadge.module.scss';
+import './SpanPercentile.styles.scss';
 
 type SpanPercentileBadgeProps = Pick<
 	UseSpanPercentileReturn,
@@ -25,7 +25,7 @@ function SpanPercentileBadge({
 }: SpanPercentileBadgeProps): JSX.Element | null {
 	if (loading) {
 		return (
-			<div className={styles.loader}>
+			<div className="span-percentile-badge__loader">
 				<Loader size={14} className="animate-spin" />
 			</div>
 		);
@@ -37,7 +37,7 @@ function SpanPercentileBadge({
 
 	return (
 		<div
-			className={styles.root}
+			className="span-percentile-badge"
 			onClick={toggleOpen}
 			role="button"
 			tabIndex={0}
@@ -50,12 +50,12 @@ function SpanPercentileBadge({
 			<KeyValueLabel
 				badgeKey={`p${percentileValue}`}
 				badgeValue={
-					<span className={styles.value}>
+					<span className="span-percentile-badge__value">
 						{duration}
 						{isOpen ? (
-							<ChevronUp size={14} className={styles.icon} />
+							<ChevronUp size={14} className="span-percentile-badge__icon" />
 						) : (
-							<ChevronDown size={14} className={styles.icon} />
+							<ChevronDown size={14} className="span-percentile-badge__icon" />
 						)}
 					</span>
 				}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentilePanel.module.scss

@@ -1,217 +0,0 @@
-// Panel — collapsible, renders below the row
-.root {
-	display: flex;
-	flex-direction: column;
-	position: relative;
-	border: 1px solid var(--l1-border);
-	border-radius: 4px;
-	filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
-	backdrop-filter: blur(20px);
-	margin: 8px 16px;
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	padding: 8px;
-	border-bottom: 1px solid var(--l1-border);
-}
-
-.content {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	padding: 8px;
-}
-
-.contentTitle {
-	font-size: var(--font-size-sm);
-	line-height: var(--line-height-20);
-}
-
-.contentHighlight {
-	color: var(--destructive);
-}
-
-.contentLoader {
-	display: inline-flex;
-	align-items: flex-end;
-	margin: 0 4px;
-	line-height: 18px;
-}
-
-.timerange {
-	width: 100%;
-}
-
-.timerangeSelect {
-	width: 100%;
-	margin-top: 8px;
-	margin-bottom: 16px;
-
-	:global(.ant-select-selector) {
-		border-radius: 50px;
-		border: 1px solid var(--l1-border);
-		background: var(--l1-background);
-		color: var(--l1-foreground);
-		font-size: 12px;
-		height: 32px;
-	}
-}
-
-.tableHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-}
-
-.tableHeaderText {
-	color: var(--l1-foreground);
-	font-size: 11px;
-	font-weight: 500;
-	line-height: 20px;
-	text-transform: uppercase;
-}
-
-.tableRows {
-	margin-top: 8px;
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.tableSkeleton {
-	:global(.ant-skeleton-title) {
-		width: 100% !important;
-		margin-top: 0 !important;
-	}
-
-	:global(.ant-skeleton-paragraph) {
-		margin-top: 8px;
-
-		& > li + li {
-			margin-top: 10px;
-			width: 100% !important;
-		}
-	}
-}
-
-.tableRow {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-	padding: 0 4px;
-}
-
-.tableRowKey {
-	flex: 0 0 auto;
-	color: var(--l1-foreground);
-	font-size: 12px;
-	font-weight: 500;
-	line-height: 20px;
-}
-
-.tableRowValue {
-	color: var(--l2-foreground);
-	font-size: 12px;
-	line-height: 20px;
-}
-
-.tableRowDash {
-	flex: 1;
-	height: 0;
-	margin: 0 8px;
-	border-top: 1px solid transparent;
-	border-image: repeating-linear-gradient(
-			to right,
-			var(--l1-border) 0,
-			var(--l1-border) 10px,
-			transparent 10px,
-			transparent 20px
-		)
-		1 stretch;
-}
-
-.isCurrent {
-	border-radius: 2px;
-	background: rgba(78, 116, 248, 0.2);
-
-	.tableRowKey {
-		color: var(--text-robin-300);
-	}
-
-	.tableRowDash {
-		border-image: repeating-linear-gradient(
-				to right,
-				#abbdff 0,
-				#abbdff 10px,
-				transparent 10px,
-				transparent 20px
-			)
-			1 stretch;
-	}
-
-	.tableRowValue {
-		color: var(--text-robin-400);
-	}
-}
-
-.resourceSelector {
-	overflow: hidden;
-	width: calc(100% + 16px);
-	position: absolute;
-	top: 32px;
-	left: -8px;
-	z-index: 1000;
-	border-radius: 4px;
-	border: 1px solid var(--l1-border);
-	background: var(--l1-background);
-	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-	backdrop-filter: blur(20px);
-}
-
-.resourceSelectorHeader {
-	border-bottom: 1px solid var(--l1-border);
-}
-
-.resourceSelectorInput {
-	border-radius: 0;
-	border: none !important;
-	box-shadow: none !important;
-	height: 36px;
-}
-
-.resourceSelectorItems {
-	height: 200px;
-	overflow-y: auto;
-
-	&::-webkit-scrollbar {
-		width: 0.3rem;
-		height: 0.3rem;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--l3-background);
-	}
-}
-
-.resourceSelectorItem {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 8px 12px;
-}
-
-.resourceSelectorItemValue {
-	color: var(--l1-foreground);
-	font-size: 13px;
-	line-height: 20px;
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentilePanel.tsx

@@ -1,7 +1,5 @@
 import { Checkbox, Input, Select, Skeleton } from 'antd';
-import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
@@ -10,7 +8,7 @@ import { SpanV3 } from 'types/api/trace/getTraceV3';
 
 import { UseSpanPercentileReturn } from './useSpanPercentile';
 
-import styles from './SpanPercentilePanel.module.scss';
+import './SpanPercentile.styles.scss';
 
 const DEFAULT_RESOURCE_ATTRIBUTES = {
 	serviceName: 'service.name',
@@ -55,46 +53,46 @@ function SpanPercentilePanel({
 	}
 
 	return (
-		<div className={styles.root}>
-			<div className={styles.header}>
-				<Button
-					variant="link"
-					color="secondary"
+		<div className="span-percentile-panel">
+			<div className="span-percentile-panel__header">
+				<Typography.Text
+					className="span-percentile-panel__header-text"
 					onClick={toggleOpen}
-					prefix={<ChevronDown size={16} />}
 				>
-					Span Percentile
-				</Button>
+					<ChevronDown size={16} /> Span Percentile
+				</Typography.Text>
 
-				<Button
-					variant="link"
-					color="secondary"
-					size="icon"
-					onClick={(): void =>
-						setShowResourceAttributesSelector(!showResourceAttributesSelector)
-					}
-					prefix={
-						showResourceAttributesSelector ? <Check size={16} /> : <Plus size={16} />
-					}
-				/>
+				{showResourceAttributesSelector ? (
+					<Check
+						size={16}
+						className="cursor-pointer span-percentile-panel__header-icon"
+						onClick={(): void => setShowResourceAttributesSelector(false)}
+					/>
+				) : (
+					<Plus
+						size={16}
+						className="cursor-pointer span-percentile-panel__header-icon"
+						onClick={(): void => setShowResourceAttributesSelector(true)}
+					/>
+				)}
 			</div>
 
 			{showResourceAttributesSelector && (
 				<div
-					className={styles.resourceSelector}
+					className="span-percentile-panel__resource-selector"
 					ref={resourceAttributesSelectorRef}
 				>
-					<div className={styles.resourceSelectorHeader}>
+					<div className="span-percentile-panel__resource-selector-header">
 						<Input
 							placeholder="Search resource attributes"
-							className={styles.resourceSelectorInput}
+							className="span-percentile-panel__resource-selector-input"
 							value={resourceAttributesSearchQuery}
 							onChange={(e): void =>
 								setResourceAttributesSearchQuery(e.target.value as string)
 							}
 						/>
 					</div>
-					<div className={styles.resourceSelectorItems}>
+					<div className="span-percentile-panel__resource-selector-items">
 						{spanResourceAttributes
 							.filter((attr) =>
 								attr.key
@@ -102,7 +100,10 @@ function SpanPercentilePanel({
 									.includes(resourceAttributesSearchQuery.toLowerCase()),
 							)
 							.map((attr) => (
-								<div className={styles.resourceSelectorItem} key={attr.key}>
+								<div
+									className="span-percentile-panel__resource-selector-item"
+									key={attr.key}
+								>
 									<Checkbox
 										checked={attr.isSelected}
 										onChange={(e): void => {
@@ -117,7 +118,9 @@ function SpanPercentilePanel({
 											attr.key === DEFAULT_RESOURCE_ATTRIBUTES.name
 										}
 									>
-										<div className={styles.resourceSelectorItemValue}>{attr.key}</div>
+										<div className="span-percentile-panel__resource-selector-item-value">
+											{attr.key}
+										</div>
 									</Checkbox>
 								</div>
 							))}
@@ -125,15 +128,15 @@ function SpanPercentilePanel({
 				</div>
 			)}
 
-			<div className={styles.content}>
-				<Typography.Text className={styles.contentTitle}>
+			<div className="span-percentile-panel__content">
+				<Typography.Text className="span-percentile-panel__content-title">
 					This span duration is{' '}
 					{!loading && spanPercentileData ? (
-						<span className={styles.contentHighlight}>
+						<span className="span-percentile-panel__content-highlight">
 							p{Math.floor(spanPercentileData.percentile || 0)}
 						</span>
 					) : (
-						<span className={styles.contentLoader}>
+						<span className="span-percentile-panel__content-loader">
 							<Loader size={12} className="animate-spin" />
 						</span>
 					)}{' '}
@@ -141,11 +144,11 @@ function SpanPercentilePanel({
 					hour(s) since the span start time.
 				</Typography.Text>
 
-				<div className={styles.timerange}>
+				<div className="span-percentile-panel__timerange">
 					<Select
 						labelInValue
 						placeholder="Select timerange"
-						className={styles.timerangeSelect}
+						className="span-percentile-panel__timerange-select"
 						getPopupContainer={(trigger): HTMLElement =>
 							trigger.parentElement || document.body
 						}
@@ -164,45 +167,45 @@ function SpanPercentilePanel({
 					/>
 				</div>
 
-				<div>
-					<div className={styles.tableHeader}>
-						<Typography.Text className={styles.tableHeaderText}>
+				<div className="span-percentile-panel__table">
+					<div className="span-percentile-panel__table-header">
+						<Typography.Text className="span-percentile-panel__table-header-text">
 							Percentile
 						</Typography.Text>
-						<Typography.Text className={styles.tableHeaderText}>
+						<Typography.Text className="span-percentile-panel__table-header-text">
 							Duration
 						</Typography.Text>
 					</div>
 
-					<div className={styles.tableRows}>
+					<div className="span-percentile-panel__table-rows">
 						{isLoadingData || isFetchingData ? (
 							<Skeleton
 								active
 								paragraph={{ rows: 3 }}
-								className={styles.tableSkeleton}
+								className="span-percentile-panel__table-skeleton"
 							/>
 						) : (
 							<>
 								{Object.entries(spanPercentileData?.percentiles || {}).map(
 									([pKey, pDuration]) => (
-										<div className={styles.tableRow} key={pKey}>
-											<Typography.Text className={styles.tableRowKey}>
+										<div className="span-percentile-panel__table-row" key={pKey}>
+											<Typography.Text className="span-percentile-panel__table-row-key">
 												{pKey}
 											</Typography.Text>
-											<div className={styles.tableRowDash} />
-											<Typography.Text className={styles.tableRowValue}>
+											<div className="span-percentile-panel__table-row-dash" />
+											<Typography.Text className="span-percentile-panel__table-row-value">
 												{getYAxisFormattedValue(`${pDuration / 1000000}`, 'ms')}
 											</Typography.Text>
 										</div>
 									),
 								)}
 
-								<div className={cx(styles.tableRow, styles.isCurrent)}>
-									<Typography.Text className={styles.tableRowKey}>
+								<div className="span-percentile-panel__table-row span-percentile-panel__table-row--current">
+									<Typography.Text className="span-percentile-panel__table-row-key">
 										p{Math.floor(spanPercentileData?.percentile || 0)}
 									</Typography.Text>
-									<div className={styles.tableRowDash} />
-									<Typography.Text className={styles.tableRowValue}>
+									<div className="span-percentile-panel__table-row-dash" />
+									<Typography.Text className="span-percentile-panel__table-row-value">
 										(this span){' '}
 										{getYAxisFormattedValue(
 											`${selectedSpan.duration_nano / 1000000}`,

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/TraceIdField.tsx

@@ -5,8 +5,6 @@ import { toast } from '@signozhq/ui/sonner';
 import ROUTES from 'constants/routes';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 
-import styles from './SpanDetailsPanel.module.scss';
-
 interface TraceIdFieldProps {
 	span: SpanV3;
 }
@@ -38,7 +36,7 @@ export function TraceIdField({ span }: TraceIdFieldProps): JSX.Element {
 			<Button
 				variant="link"
 				color="secondary"
-				className={styles.traceIdCopy}
+				className="span-details-panel__trace-id-copy"
 				onClick={handleCopy}
 				title="Click to copy trace ID"
 			>
@@ -53,7 +51,7 @@ export function TraceIdField({ span }: TraceIdFieldProps): JSX.Element {
 				pathname: `/trace/${span.trace_id}`,
 				search: window.location.search,
 			}}
-			className={styles.traceId}
+			className="span-details-panel__trace-id"
 		>
 			{span.trace_id}
 		</Link>

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/config.tsx

@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
 import { Badge } from '@signozhq/ui/badge';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 
-import styles from './SpanDetailsPanel.module.scss';
 import { TraceIdField } from './TraceIdField';
 
 interface HighlightedOption {
@@ -18,7 +17,7 @@ export const HIGHLIGHTED_OPTIONS: HighlightedOption[] = [
 		render: (span): ReactNode | null =>
 			span['service.name'] ? (
 				<Badge color="vanilla">
-					<span className={styles.serviceDot} />
+					<span className="span-details-panel__service-dot" />
 					{span['service.name']}
 				</Badge>
 			) : null,

frontend/src/pages/TraceDetailsV3/SpanHoverCard/EventTooltipContent.module.scss

@@ -1,60 +0,0 @@
-.root {
-	font-size: 12px;
-	color: var(--l1-foreground);
-	max-width: 300px;
-}
-
-.header {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
-	border-radius: 3px;
-	padding: 2px 6px;
-	font-size: 10px;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
-	color: var(--l2-foreground);
-	margin-bottom: 6px;
-}
-
-.name {
-	font-weight: 600;
-	margin-bottom: 2px;
-	color: var(--text-robin-400);
-}
-
-.hasError {
-	color: var(--destructive);
-}
-
-.time {
-	font-size: 11px;
-	color: var(--l2-foreground);
-	margin-bottom: 4px;
-}
-
-.divider {
-	border-top: 1px solid var(--l2-border);
-	margin: 6px 0;
-}
-
-.attributes {
-	font-size: 11px;
-}
-
-.kv {
-	margin-bottom: 2px;
-	line-height: 1.4;
-	word-break: break-all;
-}
-
-.key {
-	color: var(--l2-foreground);
-}
-
-.value {
-	color: var(--l1-foreground);
-}

frontend/src/pages/TraceDetailsV3/SpanHoverCard/EventTooltipContent.styles.scss

@@ -0,0 +1,60 @@
+.event-tooltip-content {
+	font-size: 12px;
+	color: var(--l1-foreground);
+	max-width: 300px;
+
+	&__header {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		background: var(--l2-background);
+		border: 1px solid var(--l2-border);
+		border-radius: 3px;
+		padding: 2px 6px;
+		font-size: 10px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+		color: var(--l2-foreground);
+		margin-bottom: 6px;
+	}
+
+	&__name {
+		font-weight: 600;
+		margin-bottom: 2px;
+		color: var(--text-robin-400);
+
+		&.error {
+			color: var(--destructive);
+		}
+	}
+
+	&__time {
+		font-size: 11px;
+		color: var(--l2-foreground);
+		margin-bottom: 4px;
+	}
+
+	&__divider {
+		border-top: 1px solid var(--l2-border);
+		margin: 6px 0;
+	}
+
+	&__attributes {
+		font-size: 11px;
+	}
+
+	&__kv {
+		margin-bottom: 2px;
+		line-height: 1.4;
+		word-break: break-all;
+	}
+
+	&__key {
+		color: var(--l2-foreground);
+	}
+
+	&__value {
+		color: var(--l1-foreground);
+	}
+}

frontend/src/pages/TraceDetailsV3/SpanHoverCard/EventTooltipContent.tsx

@@ -1,9 +1,8 @@
 import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
 import { Diamond } from '@signozhq/icons';
-import cx from 'classnames';
 import { toFixed } from 'utils/toFixed';
 
-import styles from './EventTooltipContent.module.scss';
+import './EventTooltipContent.styles.scss';
 
 export interface EventTooltipContentProps {
 	eventName: string;
@@ -21,25 +20,25 @@ export function EventTooltipContent({
 	const { time, timeUnitName } = convertTimeToRelevantUnit(timeOffsetMs);
 
 	return (
-		<div className={styles.root}>
-			<div className={styles.header}>
+		<div className="event-tooltip-content">
+			<div className="event-tooltip-content__header">
 				<Diamond size={10} />
 				<span>EVENT DETAILS</span>
 			</div>
-			<div className={cx(styles.name, isError && styles.hasError)}>
+			<div className={`event-tooltip-content__name ${isError ? 'error' : ''}`}>
 				{eventName}
 			</div>
-			<div className={styles.time}>
+			<div className="event-tooltip-content__time">
 				{toFixed(time, 2)} {timeUnitName} since span start
 			</div>
 			{Object.keys(attributeMap).length > 0 && (
 				<>
-					<div className={styles.divider} />
-					<div className={styles.attributes}>
+					<div className="event-tooltip-content__divider" />
+					<div className="event-tooltip-content__attributes">
 						{Object.entries(attributeMap).map(([key, value]) => (
-							<div key={key} className={styles.kv}>
-								<span className={styles.key}>{key}:</span>{' '}
-								<span className={styles.value}>{value}</span>
+							<div key={key} className="event-tooltip-content__kv">
+								<span className="event-tooltip-content__key">{key}:</span>{' '}
+								<span className="event-tooltip-content__value">{value}</span>
 							</div>
 						))}
 					</div>

frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.styles.scss

@@ -2,13 +2,13 @@
 // `top` is updated by the parent to track the hovered row's Y; its `left`
 // is the sidebar/timeline boundary so the popover always opens at the same
 // X regardless of which row is hovered.
-.anchor {
+.span-hover-card-anchor {
 	position: absolute;
 	width: 1px;
 	pointer-events: none;
 }
 
-.popover {
+.span-hover-card-popover {
 	// Hover card may be rendered while the SpanDetailsPanel is docked as
 	// a FloatingPanel (z-index 999); bump above the default tooltip z-index.
 	--tooltip-z-index: 1000;
@@ -20,29 +20,31 @@
 	color: var(--l1-foreground);
 }
 
-.content {
+// Flamegraph tooltip — rendered as a portal, uses same semantic tokens.
+// Position is set inline on the element (left/top track the cursor); the
+// static layout/decoration lives here.
+.flamegraph-tooltip {
+	position: fixed;
+	z-index: 1000;
+	pointer-events: none;
+	background-color: var(--l1-background);
+	padding: 8px 12px;
+	border-radius: 4px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+	border: 1px solid var(--l2-border);
+}
+
+.span-hover-card-content {
 	font-size: 12px;
 	color: var(--l1-foreground);
-}
 
-.name {
-	font-weight: 600;
-	margin-bottom: 4px;
-}
+	&__name {
+		font-weight: 600;
+		margin-bottom: 4px;
+	}
 
-.row {
-	line-height: 1.5;
-	color: var(--l2-foreground);
-}
-
-.preview {
-	// container for additional preview rows
-}
-
-.previewKey {
-	color: var(--l2-foreground);
-}
-
-.previewValue {
-	color: var(--l1-foreground);
+	&__row {
+		line-height: 1.5;
+		color: var(--l2-foreground);
+	}
 }

frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.tsx

@@ -11,7 +11,7 @@ import { useMemo } from 'react';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 import { toFixed } from 'utils/toFixed';
 
-import styles from './SpanHoverCard.module.scss';
+import './SpanHoverCard.styles.scss';
 
 /**
  * Span-level fields that the tooltip always shows (as the colored title or
@@ -51,21 +51,27 @@ export function SpanTooltipContent({
 		convertTimeToRelevantUnit(durationMs);
 
 	return (
-		<div className={styles.content}>
-			<div className={styles.name} style={{ color }}>
+		<div className="span-hover-card-content">
+			<div className="span-hover-card-content__name" style={{ color }}>
 				{spanName}
 			</div>
-			<div className={styles.row}>status: {hasError ? 'error' : 'ok'}</div>
-			<div className={styles.row}>start: {toFixed(relativeStartMs, 2)} ms</div>
-			<div className={styles.row}>
+			<div className="span-hover-card-content__row">
+				status: {hasError ? 'error' : 'ok'}
+			</div>
+			<div className="span-hover-card-content__row">
+				start: {toFixed(relativeStartMs, 2)} ms
+			</div>
+			<div className="span-hover-card-content__row">
 				duration: {toFixed(formattedDuration, 2)} {timeUnitName}
 			</div>
 			{previewRows && previewRows.length > 0 && (
-				<div className={styles.preview}>
+				<div className="span-hover-card-content__preview">
 					{previewRows.map((row) => (
-						<div key={row.key} className={styles.row}>
-							<span className={styles.previewKey}>{row.key}:</span>{' '}
-							<span className={styles.previewValue}>{row.value}</span>
+						<div key={row.key} className="span-hover-card-content__row">
+							<span className="span-hover-card-content__preview-key">{row.key}:</span>{' '}
+							<span className="span-hover-card-content__preview-value">
+								{row.value}
+							</span>
 						</div>
 					))}
 				</div>
@@ -146,7 +152,7 @@ export function SpanHoverCard({
 			<Tooltip open={hoverCardData !== null} onOpenChange={onOpenChange}>
 				<TooltipTrigger asChild>
 					<div
-						className={styles.anchor}
+						className="span-hover-card-anchor"
 						style={{
 							top: hoverCardData?.anchorTop ?? 0,
 							left: anchorLeft,
@@ -158,7 +164,7 @@ export function SpanHoverCard({
 					side="right"
 					align="start"
 					sideOffset={8}
-					className={styles.popover}
+					className="span-hover-card-popover"
 				>
 					{hoverCardData && <SpanTooltipContent {...hoverCardData.tooltip} />}
 				</TooltipContent>

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.module.scss

@@ -1,75 +0,0 @@
-.wrapper {
-	flex-shrink: 0;
-	position: relative;
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	padding: 8px 16px;
-	gap: 8px;
-
-	// KeyValueLabel renders with a global `.key-value-label` root; keep it from
-	// shrinking on the trace details header.
-	:global(.key-value-label) {
-		flex-shrink: 0;
-	}
-}
-
-.backBtn {
-	flex-shrink: 0;
-}
-
-.filter {
-	min-width: 0;
-}
-
-.isExpanded {
-	max-width: none;
-	flex: 1;
-}
-
-.oldViewBtn {
-	flex-shrink: 0;
-}
-
-.analyticsBtn {
-	flex-shrink: 0;
-	margin-left: auto;
-}
-
-.subHeader {
-	display: flex;
-	align-items: center;
-	gap: 16px;
-	padding: 4px 16px 8px;
-	font-size: 13px;
-	color: var(--l2-foreground);
-}
-
-.subItem {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	white-space: nowrap;
-}
-
-.separator {
-	color: var(--l2-foreground);
-	opacity: 0.5;
-}
-
-.entryPointBadge {
-	padding: 2px 8px;
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-	font-size: 12px;
-}
-
-.skeleton {
-	:global(.ant-skeleton-input) {
-		width: 160px !important;
-		min-height: 20px !important;
-		height: 20px !important;
-	}
-}

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.styles.scss

@@ -0,0 +1,74 @@
+.trace-details-header-wrapper {
+	flex-shrink: 0;
+	position: relative;
+}
+
+.trace-details-header {
+	display: flex;
+	align-items: center;
+	padding: 8px 16px;
+	gap: 8px;
+
+	&__back-btn {
+		flex-shrink: 0;
+	}
+
+	.key-value-label {
+		flex-shrink: 0;
+	}
+
+	&__filter {
+		&.trace-v3-filter-row {
+			padding: 0;
+		}
+		min-width: 0;
+
+		&--expanded {
+			max-width: none;
+			flex: 1;
+		}
+	}
+
+	&__old-view-btn {
+		flex-shrink: 0;
+	}
+
+	&__analytics-btn {
+		flex-shrink: 0;
+		margin-left: auto;
+	}
+
+	&__sub-header {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+		padding: 4px 16px 8px;
+		font-size: 13px;
+		color: var(--l2-foreground);
+	}
+
+	&__sub-item {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		white-space: nowrap;
+	}
+
+	&__separator {
+		color: var(--l2-foreground);
+		opacity: 0.5;
+	}
+
+	&__entry-point-badge {
+		padding: 2px 8px;
+		border: 1px solid var(--l2-border);
+		border-radius: 4px;
+		font-size: 12px;
+	}
+
+	&__skeleton .ant-skeleton-input {
+		width: 160px !important;
+		min-height: 20px !important;
+		height: 20px !important;
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -9,7 +9,6 @@ import {
 } from '@signozhq/ui/tooltip';
 import { Skeleton } from 'antd';
 import setLocalStorageKey from 'api/browser/localstorage/set';
-import cx from 'classnames';
 import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
@@ -34,7 +33,7 @@ import AnalyticsPanel from '../SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel';
 import Filters from '../TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters';
 import TraceOptionsMenu from './TraceOptionsMenu';
 
-import styles from './TraceDetailsHeader.module.scss';
+import './TraceDetailsHeader.styles.scss';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 
 interface FilterMetadata {
@@ -69,7 +68,7 @@ function DetailsLoader(): JSX.Element {
 					key={i}
 					active
 					size="small"
-					className={styles.skeleton}
+					className="trace-details-header__skeleton"
 				/>
 			))}
 		</>
@@ -121,15 +120,15 @@ function TraceDetailsHeader({
 		convertTimeToRelevantUnit(durationMs);
 
 	return (
-		<div className={styles.wrapper}>
-			<div className={styles.header}>
+		<div className="trace-details-header-wrapper">
+			<div className="trace-details-header">
 				{!isFilterExpanded && (
 					<>
 						<Button
 							variant="solid"
 							color="secondary"
 							size="md"
-							className={styles.backBtn}
+							className="trace-details-header__back-btn"
 							onClick={handlePreviousBtnClick}
 						>
 							<ArrowLeft size={14} />
@@ -152,7 +151,7 @@ function TraceDetailsHeader({
 												variant="ghost"
 												size="icon"
 												color="secondary"
-												className={styles.analyticsBtn}
+												className="trace-details-header__analytics-btn"
 												onClick={(): void => setIsAnalyticsOpen((prev) => !prev)}
 											>
 												<ChartPie size={14} />
@@ -168,7 +167,11 @@ function TraceDetailsHeader({
 								/>
 							</>
 						)}
-						<div className={cx(styles.filter, isFilterExpanded && styles.isExpanded)}>
+						<div
+							className={`trace-details-header__filter${
+								isFilterExpanded ? ' trace-details-header__filter--expanded' : ''
+							}`}
+						>
 							<Filters
 								startTime={filterMetadata.startTime}
 								endTime={filterMetadata.endTime}
@@ -184,7 +187,7 @@ function TraceDetailsHeader({
 								variant="solid"
 								color="secondary"
 								size="sm"
-								className={styles.oldViewBtn}
+								className="trace-details-header__old-view-btn"
 								onClick={handleSwitchToOldView}
 							>
 								Legacy View
@@ -195,22 +198,22 @@ function TraceDetailsHeader({
 			</div>
 
 			{showTraceDetails && (
-				<div className={styles.subHeader}>
+				<div className="trace-details-header__sub-header">
 					{traceMetadata ? (
 						<>
-							<span className={styles.subItem}>
+							<span className="trace-details-header__sub-item">
 								<Server size={13} />
 								{traceMetadata.rootServiceName}
-								<span className={styles.separator}>—</span>
-								<span className={styles.entryPointBadge}>
+								<span className="trace-details-header__separator">—</span>
+								<span className="trace-details-header__entry-point-badge">
 									{traceMetadata.rootServiceEntryPoint}
 								</span>
 							</span>
-							<span className={styles.subItem}>
+							<span className="trace-details-header__sub-item">
 								<Timer size={13} />
 								{parseFloat(formattedDuration.toFixed(2))} {timeUnitName}
 							</span>
-							<span className={styles.subItem}>
+							<span className="trace-details-header__sub-item">
 								<CalendarClock size={13} />
 								{dayjs(traceMetadata.startTimestampMillis).format(
 									DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS,

frontend/src/pages/TraceDetailsV3/TraceDetailsV3.module.scss

@@ -1,127 +0,0 @@
-.root {
-	height: calc(100vh);
-	display: flex;
-	flex-direction: column;
-}
-
-.content {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	overflow: hidden;
-}
-
-// Shared Ant Collapse chrome reset for both the flamegraph and waterfall
-// collapse panels.
-.flameCollapse,
-.waterfallCollapse {
-	border: none;
-	border-radius: 0;
-	background: transparent;
-
-	:global(.ant-collapse-item) {
-		border: none;
-	}
-
-	:global(.ant-collapse-header) {
-		border-top: 1px solid var(--l2-border);
-		border-bottom: 1px solid var(--l2-border);
-	}
-
-	:global(.ant-collapse-content) {
-		background: transparent;
-		border-top: none;
-		// Disable collapse animation — virtualizer and canvas flicker during
-		// height transitions.
-		transition: none !important;
-	}
-}
-
-.collapseLabel {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: 100%;
-}
-
-.collapseTitle {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-}
-
-.collapseCount {
-	display: flex;
-	gap: 12px;
-	align-items: center;
-	font-size: 12px;
-	font-weight: 400;
-	color: var(--l2-foreground);
-}
-
-.collapseCountItem {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-}
-
-.hasErrors {
-	color: var(--destructive);
-}
-
-.flameCollapse {
-	flex-shrink: 0;
-
-	:global(.ant-collapse-content-box) {
-		padding: 0 !important;
-	}
-}
-
-.waterfallCollapse {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-
-	:global(.ant-collapse-item) {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-	}
-
-	:global(.ant-collapse-content.ant-collapse-content-active) {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-	}
-
-	:global(.ant-collapse-content-box) {
-		padding: 0 !important;
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-	}
-
-	&.isDocked {
-		flex: none;
-
-		:global(.ant-collapse-item) {
-			flex: none;
-			display: block;
-		}
-
-		:global(.ant-collapse-content-box) {
-			flex: none;
-			display: block;
-		}
-	}
-}
-
-.dockedSpanDetails {
-	flex: 1;
-	overflow: auto;
-	min-height: 0;
-}

frontend/src/pages/TraceDetailsV3/TraceDetailsV3.styles.scss

@@ -0,0 +1,124 @@
+.trace-details-v3 {
+	height: calc(100vh);
+	display: flex;
+	flex-direction: column;
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		overflow: hidden;
+	}
+
+	&__flame-collapse,
+	&__waterfall-collapse {
+		border: none;
+		border-radius: 0;
+		background: transparent;
+
+		.ant-collapse-item {
+			border: none;
+		}
+
+		.ant-collapse-header {
+			border-top: 1px solid var(--l2-border);
+			border-bottom: 1px solid var(--l2-border);
+		}
+
+		.ant-collapse-content {
+			background: transparent;
+			border-top: none;
+			// Disable collapse animation — virtualizer and canvas flicker during height transitions
+			transition: none !important;
+		}
+	}
+
+	&__collapse-label {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+	}
+
+	&__collapse-title {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	&__collapse-count {
+		display: flex;
+		gap: 12px;
+		align-items: center;
+		font-size: 12px;
+		font-weight: 400;
+		color: var(--l2-foreground);
+	}
+
+	&__collapse-count-item {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+	}
+
+	&__collapse-count-errors {
+		color: var(--destructive);
+	}
+
+	&__flame-collapse {
+		flex-shrink: 0;
+
+		.ant-collapse-content-box {
+			padding: 0 !important;
+		}
+	}
+
+	&__waterfall-collapse {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+
+		.ant-collapse-item {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+		}
+
+		.ant-collapse-content.ant-collapse-content-active {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+		}
+
+		.ant-collapse-content-box {
+			padding: 0 !important;
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+		}
+
+		&--docked {
+			flex: none;
+
+			.ant-collapse-item {
+				flex: none;
+				display: block;
+			}
+
+			.ant-collapse-content-box {
+				flex: none;
+				display: block;
+			}
+		}
+	}
+
+	&__docked-span-details {
+		flex: 1;
+		overflow: auto;
+		min-height: 0;
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/FlamegraphCanvas.module.scss

@@ -1,42 +0,0 @@
-.root {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	padding: 0 15px;
-}
-
-.viewport {
-	flex: 1;
-	overflow: hidden;
-	position: relative;
-}
-
-.main {
-	display: block;
-	width: 100%;
-	cursor: grab;
-}
-
-.overlay {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	pointer-events: none;
-}
-
-// Flamegraph tooltip — rendered as a portal, follows the cursor.
-// Position is set inline on the element (left/top); the layout/decoration
-// lives here. Shares visual treatment with the waterfall hover popover
-// but is positioned `fixed` instead of anchored.
-.tooltip {
-	position: fixed;
-	z-index: 1000;
-	pointer-events: none;
-	background-color: var(--l1-background);
-	padding: 8px 12px;
-	border-radius: 4px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-	border: 1px solid var(--l2-border);
-	color: var(--l1-foreground);
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/FlamegraphCanvas.styles.scss

@@ -0,0 +1,26 @@
+.flamegraph-canvas {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	padding: 0 15px;
+}
+
+.flamegraph-canvas__viewport {
+	flex: 1;
+	overflow: hidden;
+	position: relative;
+}
+
+.flamegraph-canvas__main {
+	display: block;
+	width: 100%;
+	cursor: grab;
+}
+
+.flamegraph-canvas__overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	pointer-events: none;
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/FlamegraphCanvas.tsx

@@ -16,7 +16,7 @@ import { useFlamegraphZoom } from './hooks/useFlamegraphZoom';
 import { useScrollToSpan } from './hooks/useScrollToSpan';
 import { EventRect, FlamegraphCanvasProps, SpanRect } from './types';
 
-import styles from './FlamegraphCanvas.module.scss';
+import './FlamegraphCanvas.styles.scss';
 
 function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
 	const {
@@ -194,7 +194,7 @@ function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
 	const tooltipElement = tooltipContent
 		? createPortal(
 				<div
-					className={styles.tooltip}
+					className="span-hover-card-popover flamegraph-tooltip"
 					style={{
 						left: Math.min(tooltipContent.clientX + 15, window.innerWidth - 220),
 						top: Math.min(tooltipContent.clientY + 15, window.innerHeight - 100),
@@ -223,7 +223,7 @@ function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
 		: null;
 
 	return (
-		<div className={styles.root}>
+		<div className="flamegraph-canvas">
 			{tooltipElement}
 			<TimelineV3
 				startTimestamp={viewStartTs}
@@ -234,7 +234,7 @@ function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
 			/>
 			<div
 				ref={containerRef}
-				className={styles.viewport}
+				className="flamegraph-canvas__viewport"
 				onMouseEnter={(): void => {
 					isOverFlamegraphRef.current = true;
 				}}
@@ -242,7 +242,7 @@ function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
 			>
 				<canvas
 					ref={canvasRef}
-					className={styles.main}
+					className="flamegraph-canvas__main"
 					onMouseDown={(e): void => {
 						handleMouseDown(e);
 						handleMouseDownForClick(e);
@@ -251,7 +251,7 @@ function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
 					onMouseUp={handleMouseUp}
 					onClick={handleClick}
 				/>
-				<canvas ref={overlayCanvasRef} className={styles.overlay} />
+				<canvas ref={overlayCanvasRef} className="flamegraph-canvas__overlay" />
 			</div>
 		</div>
 	);

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.module.scss

@@ -1,230 +0,0 @@
-// Container — applied to the `.ant-modal` element via SignozModal's className
-// prop. Ant Modal portals into document.body, but the className still lives on
-// the modal root, so descendant overrides work via `:global` nesting.
-.container {
-	:global(.ant-modal-content),
-	:global(.ant-modal-header) {
-		background: var(--l1-background);
-	}
-
-	:global(.ant-modal-header) {
-		border-bottom: none;
-
-		:global(.ant-modal-title) {
-			color: var(--l1-foreground);
-		}
-	}
-
-	:global(.ant-modal-body) {
-		padding: 14px 16px !important;
-		padding-bottom: 0 !important;
-		border-bottom-left-radius: 0;
-		border-bottom-right-radius: 0;
-	}
-
-	:global(.ant-modal-footer) {
-		margin-top: 0;
-		background: var(--l2-background);
-		border-top: 1px solid var(--l2-border);
-		padding: 16px !important;
-
-		.saveButton {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			gap: 4px;
-			color: var(--l1-foreground);
-			font-size: 12px;
-			font-weight: 500;
-			line-height: 24px;
-			width: 135px;
-
-			:global(.ant-btn-icon) {
-				display: flex;
-			}
-
-			&:disabled {
-				color: var(--l2-foreground);
-
-				:global(.ant-btn-icon svg) {
-					stroke: var(--l2-foreground);
-				}
-			}
-		}
-
-		.discardButton {
-			background: var(--l3-background);
-		}
-
-		:global(.ant-btn) {
-			border-radius: 2px;
-			padding: 4px 8px;
-			margin: 0 !important;
-			border: none;
-			box-shadow: none;
-		}
-	}
-}
-
-// Inner content wrapper (sibling of modal chrome)
-.root {
-	// Funnel-detail view overrides — only when the inner wrapper has
-	// `.isDetails` applied alongside `.root`.
-	&.isDetails {
-		:global(.traces-funnel-details) {
-			height: unset;
-
-			:global(.traces-funnel-details__steps-config) {
-				width: unset;
-				border: none;
-			}
-
-			:global(.funnel-step-wrapper) {
-				gap: 15px;
-			}
-
-			:global(.steps-content) {
-				max-height: 500px;
-			}
-		}
-	}
-
-	:global(.funnel-item) {
-		padding: 8px 8px 12px 16px;
-
-		&,
-		&:first-child {
-			border-radius: 6px;
-		}
-
-		:global(.funnel-item__header) {
-			line-height: 20px;
-		}
-
-		:global(.funnel-item__details) {
-			line-height: 18px;
-		}
-	}
-}
-
-.loadingSpinner {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 400px;
-}
-
-.search {
-	display: flex;
-	gap: 12px;
-	margin-bottom: 14px;
-	align-items: center;
-}
-
-.searchInput {
-	flex: 1;
-	padding: 6px 8px;
-	background: var(--l3-background);
-
-	:global(.ant-input-prefix) {
-		height: 18px;
-		margin-inline-end: 6px;
-
-		svg {
-			opacity: 0.4;
-		}
-	}
-
-	&,
-	input {
-		font-size: 14px;
-		line-height: 18px;
-		letter-spacing: -0.07px;
-		font-weight: 400;
-		background: var(--l3-background);
-	}
-
-	input::placeholder {
-		color: var(--l2-foreground);
-		opacity: 0.6;
-	}
-}
-
-.createButton {
-	width: 153px;
-	padding: 4px 8px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 4px;
-	flex-shrink: 0;
-	border-radius: 2px;
-	background: var(--l3-background);
-	border: none;
-	box-shadow: none;
-	color: var(--l2-foreground);
-	font-size: 12px;
-	font-weight: 500;
-	line-height: 24px;
-}
-
-.list {
-	max-height: 400px;
-	overflow-y: scroll;
-
-	:global(.funnels-empty__content) {
-		padding: 0;
-	}
-
-	:global(.funnels-list) {
-		gap: 8px;
-
-		:global(.funnel-item) {
-			padding: 8px 16px 12px;
-
-			:global(.funnel-item__details) {
-				margin-top: 8px;
-			}
-		}
-	}
-}
-
-.spinner {
-	height: 400px;
-}
-
-.backButton {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	color: var(--l2-foreground);
-	font-size: 14px;
-	line-height: 20px;
-	margin-bottom: 14px;
-}
-
-.detailsView {
-	display: flex;
-	flex-direction: column;
-	gap: 24px;
-
-	:global(.funnel-configuration__steps) {
-		padding: 0;
-
-		:global(.funnel-step__content .filters__service-and-span .ant-select) {
-			width: 170px;
-		}
-
-		:global(.funnel-step__footer .error) {
-			width: 25%;
-		}
-
-		:global(.inter-step-config) {
-			width: calc(100% - 104px);
-		}
-	}
-
-	:global(.funnel-item__actions-popover) {
-		display: none;
-	}
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.styles.scss

@@ -0,0 +1,236 @@
+// Modal base styles
+.add-span-to-funnel-modal {
+	&__loading-spinner {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 400px;
+	}
+	&-container {
+		.ant-modal {
+			&-content,
+			&-header {
+				background: var(--l1-background);
+			}
+
+			&-header {
+				border-bottom: none;
+
+				.ant-modal-title {
+					color: var(--l1-foreground);
+				}
+			}
+
+			&-body {
+				padding: 14px 16px !important;
+				padding-bottom: 0 !important;
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+
+			&-footer {
+				margin-top: 0;
+				background: var(--l2-background);
+				border-top: 1px solid var(--l2-border);
+				padding: 16px !important;
+				.add-span-to-funnel-modal {
+					&__save-button {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						gap: 4px;
+						color: var(--l1-foreground);
+						font-size: 12px;
+						font-weight: 500;
+						line-height: 24px;
+						width: 135px;
+
+						.ant-btn-icon {
+							display: flex;
+						}
+						&:disabled {
+							color: var(--l2-foreground);
+							.ant-btn-icon {
+								svg {
+									stroke: var(--l2-foreground);
+								}
+							}
+						}
+					}
+					&__discard-button {
+						background: var(--l3-background);
+					}
+				}
+				.ant-btn {
+					border-radius: 2px;
+					padding: 4px 8px;
+					margin: 0 !important;
+					border: none;
+					box-shadow: none;
+				}
+			}
+		}
+	}
+}
+
+// Main modal styles
+.add-span-to-funnel-modal {
+	// Common button styles
+	%button-base {
+		display: flex;
+		align-items: center;
+	}
+
+	// Details view styles
+	&--details {
+		.traces-funnel-details {
+			height: unset;
+
+			&__steps-config {
+				width: unset;
+				border: none;
+			}
+
+			.funnel-step-wrapper {
+				gap: 15px;
+			}
+
+			.steps-content {
+				max-height: 500px;
+			}
+		}
+	}
+
+	// Search section
+	&__search {
+		display: flex;
+		gap: 12px;
+		margin-bottom: 14px;
+		align-items: center;
+
+		&-input {
+			flex: 1;
+			padding: 6px 8px;
+			background: var(--l3-background);
+
+			.ant-input-prefix {
+				height: 18px;
+				margin-inline-end: 6px;
+				svg {
+					opacity: 0.4;
+				}
+			}
+
+			&,
+			input {
+				font-size: 14px;
+				line-height: 18px;
+				letter-spacing: -0.07px;
+				font-weight: 400;
+				background: var(--l3-background);
+			}
+
+			input::placeholder {
+				color: var(--l2-foreground);
+				opacity: 0.6;
+			}
+		}
+	}
+
+	// Create button
+	&__create-button {
+		@extend %button-base;
+		width: 153px;
+		padding: 4px 8px;
+		justify-content: center;
+		gap: 4px;
+		flex-shrink: 0;
+		border-radius: 2px;
+		background: var(--l3-background);
+		border: none;
+		box-shadow: none;
+		color: var(--l2-foreground);
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 24px;
+	}
+	.funnel-item {
+		padding: 8px 8px 12px 16px;
+		&,
+		&:first-child {
+			border-radius: 6px;
+		}
+
+		&__header {
+			line-height: 20px;
+		}
+		&__details {
+			line-height: 18px;
+		}
+	}
+
+	// List section
+	&__list {
+		max-height: 400px;
+		overflow-y: scroll;
+		.funnels-empty {
+			&__content {
+				padding: 0;
+			}
+		}
+
+		.funnels-list {
+			gap: 8px;
+
+			.funnel-item {
+				padding: 8px 16px 12px;
+
+				&__details {
+					margin-top: 8px;
+				}
+			}
+		}
+	}
+
+	&__spinner {
+		height: 400px;
+	}
+
+	// Back button
+	&__back-button {
+		@extend %button-base;
+		gap: 6px;
+		color: var(--l2-foreground);
+		font-size: 14px;
+		line-height: 20px;
+		margin-bottom: 14px;
+	}
+
+	// Details section
+	&__details {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+
+		.funnel-configuration__steps {
+			padding: 0;
+
+			.funnel-step {
+				&__content .filters__service-and-span .ant-select {
+					width: 170px;
+				}
+
+				&__footer .error {
+					width: 25%;
+				}
+			}
+
+			.inter-step-config {
+				width: calc(100% - 104px);
+			}
+		}
+		.funnel-item__actions-popover {
+			display: none;
+		}
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx

@@ -22,7 +22,7 @@ import { filterFunnelsByQuery } from 'pages/TracesFunnels/utils';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 import { FunnelData } from 'types/api/traceFunnels';
 
-import styles from './AddSpanToFunnelModal.module.scss';
+import './AddSpanToFunnelModal.styles.scss';
 
 enum ModalView {
 	LIST = 'list',
@@ -62,7 +62,7 @@ function FunnelDetailsView({
 	}, [triggerDiscard, funnel.steps, handleRestoreSteps]);
 
 	return (
-		<div className={styles.detailsView}>
+		<div className="add-span-to-funnel-modal__details">
 			<FunnelListItem
 				funnel={funnel}
 				shouldRedirectToTracesListOnDeleteSuccess={false}
@@ -161,11 +161,11 @@ function AddSpanToFunnelModal({
 	};
 
 	const renderListView = (): JSX.Element => (
-		<div className={styles.root}>
+		<div className="add-span-to-funnel-modal">
 			{!!filteredData?.length && (
-				<div className={styles.search}>
+				<div className="add-span-to-funnel-modal__search">
 					<Input
-						className={styles.searchInput}
+						className="add-span-to-funnel-modal__search-input"
 						placeholder="Search by name, description, or tags..."
 						prefix={<Search size={12} />}
 						value={searchQuery}
@@ -173,7 +173,7 @@ function AddSpanToFunnelModal({
 					/>
 				</div>
 			)}
-			<div className={styles.list}>
+			<div className="add-span-to-funnel-modal__list">
 				<OverlayScrollbar>
 					<TracesFunnelsContentRenderer
 						isError={isError}
@@ -201,11 +201,11 @@ function AddSpanToFunnelModal({
 	);
 
 	const renderDetailsView = ({ span }: { span: SpanV3 }): JSX.Element => (
-		<div className={cx(styles.root, styles.isDetails)}>
+		<div className="add-span-to-funnel-modal add-span-to-funnel-modal--details">
 			<Button
 				variant="ghost"
 				color="secondary"
-				className={styles.backButton}
+				className="add-span-to-funnel-modal__back-button"
 				onClick={handleBack}
 				prefix={<ArrowLeft size={14} />}
 			>
@@ -214,7 +214,7 @@ function AddSpanToFunnelModal({
 			<div className="traces-funnel-details">
 				<div className="traces-funnel-details__steps-config">
 					<Spin
-						className={styles.loadingSpinner}
+						className="add-span-to-funnel-modal__loading-spinner"
 						spinning={isFunnelDetailsLoading || isFunnelDetailsFetching}
 						indicator={<LoaderCircle size={14} className="animate-spin" />}
 					>
@@ -245,7 +245,10 @@ function AddSpanToFunnelModal({
 			onCancel={onClose}
 			width={570}
 			title="Add span to funnel"
-			className={styles.container}
+			className={cx('add-span-to-funnel-modal-container', {
+				'add-span-to-funnel-modal-container--details':
+					activeView === ModalView.DETAILS,
+			})}
 			footer={
 				activeView === ModalView.DETAILS
 					? [
@@ -254,7 +257,7 @@ function AddSpanToFunnelModal({
 								color="secondary"
 								key="discard"
 								onClick={handleDiscard}
-								className={styles.discardButton}
+								className="add-span-to-funnel-modal__discard-button"
 								disabled={!isUnsavedChanges}
 							>
 								Discard
@@ -263,7 +266,7 @@ function AddSpanToFunnelModal({
 								key="save"
 								variant="solid"
 								color="primary"
-								className={styles.saveButton}
+								className="add-span-to-funnel-modal__save-button"
 								onClick={handleSaveFunnel}
 								disabled={!isUnsavedChanges}
 								prefix={<Check size={14} />}
@@ -276,7 +279,7 @@ function AddSpanToFunnelModal({
 								key="create"
 								variant="outlined"
 								color="secondary"
-								className={styles.createButton}
+								className="add-span-to-funnel-modal__create-button"
 								onClick={handleCreateNewClick}
 								prefix={<Plus size={14} />}
 							>

frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/SpanLineActionButtons.styles.scss

@@ -1,4 +1,4 @@
-.root {
+.span-line-action-buttons {
 	display: flex;
 	position: absolute;
 	transform: translate(-50%, -50%);
@@ -8,20 +8,20 @@
 	border-radius: 2px;
 	border: 1px solid var(--l1-border);
 	background: var(--l2-background);
-}
 
-.copyBtn {
-	border: none;
-	box-shadow: none;
-	padding: 9px;
-	justify-content: center;
-	align-items: center;
-	display: flex;
-	border-color: var(--l1-border) !important;
+	.copy-span-btn {
+		border: none;
+		box-shadow: none;
+		padding: 9px;
+		justify-content: center;
+		align-items: center;
+		display: flex;
+		border-color: var(--l1-border) !important;
+	}
 }
 
 // Tooltip rendered in a portal; bump above FloatingPanel (z-index 999) so it
 // stays visible when the SpanDetailsPanel is docked as a floating panel.
-.tooltip {
+.span-line-action-tooltip {
 	--tooltip-z-index: 1000;
 }

frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/__tests__/SpanLineActionButtons.test.tsx

@@ -70,6 +70,24 @@ describe('SpanLineActionButtons', () => {
 		expect(mockOnSpanCopy).toHaveBeenCalledTimes(1);
 	});
 
+	it('applies correct styling classes', () => {
+		(useCopySpanLink as jest.Mock).mockReturnValue({
+			onSpanCopy: jest.fn(),
+		});
+
+		render(<SpanLineActionButtons span={mockSpan} />);
+
+		// Check if the main container has the correct class
+		const container = screen
+			.getByRole('button')
+			.closest('.span-line-action-buttons');
+		expect(container).toHaveClass('span-line-action-buttons');
+
+		// Check if the button has the correct class
+		const copyButton = screen.getByRole('button');
+		expect(copyButton).toHaveClass('copy-span-btn');
+	});
+
 	it('copies span link to clipboard when copy button is clicked', () => {
 		const mockSetCopy = jest.fn();
 		const mockUrlQuery = {

frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/index.tsx

@@ -9,7 +9,7 @@ import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
 import { Link } from '@signozhq/icons';
 import { Span } from 'types/api/trace/getTraceV2';
 
-import styles from './SpanLineActionButtons.module.scss';
+import './SpanLineActionButtons.styles.scss';
 
 export interface SpanLineActionButtonsProps {
 	span: Span;
@@ -20,7 +20,7 @@ export default function SpanLineActionButtons({
 	const { onSpanCopy } = useCopySpanLink(span);
 
 	return (
-		<div className={styles.root}>
+		<div className="span-line-action-buttons">
 			<TooltipProvider>
 				<Tooltip>
 					<TooltipTrigger asChild>
@@ -29,12 +29,14 @@ export default function SpanLineActionButtons({
 							size="icon"
 							color="secondary"
 							onClick={onSpanCopy}
-							className={styles.copyBtn}
+							className="copy-span-btn"
 						>
 							<Link size={14} />
 						</Button>
 					</TooltipTrigger>
-					<TooltipContent className={styles.tooltip}>Copy Span Link</TooltipContent>
+					<TooltipContent className="span-line-action-tooltip">
+						Copy Span Link
+					</TooltipContent>
 				</Tooltip>
 			</TooltipProvider>
 		</div>

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.module.scss

@@ -1,11 +0,0 @@
-.root {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-}
-
-.loadingSkeleton {
-	justify-content: center;
-	align-items: center;
-	padding: 20px;
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.styles.scss

@@ -0,0 +1,11 @@
+.trace-waterfall {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+
+	.loading-skeleton {
+		justify-content: center;
+		align-items: center;
+		padding: 20px;
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.tsx

@@ -13,7 +13,7 @@ import { getVisibleSpans } from './utils';
 
 import { IInterestedSpan } from './types';
 
-import styles from './TraceWaterfall.module.scss';
+import './TraceWaterfall.styles.scss';
 
 interface ITraceWaterfallProps {
 	traceId: string;
@@ -100,7 +100,7 @@ function TraceWaterfall(props: ITraceWaterfallProps): JSX.Element {
 		switch (traceWaterfallState) {
 			case TraceWaterfallStates.LOADING:
 				return (
-					<div className={styles.loadingSkeleton}>
+					<div className="loading-skeleton">
 						<Skeleton active paragraph={{ rows: 6 }} />
 					</div>
 				);
@@ -158,7 +158,7 @@ function TraceWaterfall(props: ITraceWaterfallProps): JSX.Element {
 		uncollapsedNodes,
 	]);
 
-	return <div className={styles.root}>{getContent}</div>;
+	return <div className="trace-waterfall">{getContent}</div>;
 }
 
 export default TraceWaterfall;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Error/Error.module.scss

@@ -1,24 +0,0 @@
-.root {
-	display: flex;
-	padding: 12px;
-	margin: 20px;
-	gap: 12px;
-	align-items: flex-start;
-	border-radius: 4px;
-	background: var(--destructive);
-}
-
-.text,
-.value {
-	color: var(--destructive-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-}
-
-.text {
-	flex-shrink: 0;
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Error/Error.styles.scss

@@ -0,0 +1,30 @@
+.error-waterfall {
+	display: flex;
+	padding: 12px;
+	margin: 20px;
+	gap: 12px;
+	align-items: flex-start;
+	border-radius: 4px;
+	background: var(--destructive);
+
+	.text {
+		color: var(--destructive-foreground);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+		flex-shrink: 0;
+	}
+
+	.value {
+		color: var(--destructive-foreground);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Error/Error.tsx

@@ -2,7 +2,7 @@ import { Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { AxiosError } from 'axios';
 
-import styles from './Error.module.scss';
+import './Error.styles.scss';
 
 interface IErrorProps {
 	error: AxiosError;
@@ -12,16 +12,10 @@ function Error(props: IErrorProps): JSX.Element {
 	const { error } = props;
 
 	return (
-		<div className={styles.root}>
-			<Typography.Text className={styles.text}>
-				Something went wrong!
-			</Typography.Text>
+		<div className="error-waterfall">
+			<Typography.Text className="text">Something went wrong!</Typography.Text>
 			<Tooltip title={error?.message}>
-				<Typography.Text
-					className={styles.value}
-					title={error?.message}
-					truncate={1}
-				>
+				<Typography.Text className="value" title={error?.message} truncate={1}>
 					{error?.message}
 				</Typography.Text>
 			</Tooltip>

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.module.scss

@@ -1,136 +0,0 @@
-.root {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-
-	// QuerySearch child sets `query-builder-search-v2` globally; size it to the
-	// search container by reaching into the descendant.
-	:global(.query-builder-search-v2) {
-		width: 100%;
-	}
-
-	// ToggleGroup children use generated class names; nest the global selectors
-	// under the local row so they only apply inside this filter row.
-	:global([class*='toggle-group']) {
-		flex-shrink: 0;
-
-		:global([class*='toggle-group-item']) {
-			flex: 0 0 auto;
-		}
-	}
-}
-
-.isExpanded {
-	flex: 1;
-}
-
-.searchContainer {
-	flex: 1;
-	min-width: 0;
-}
-
-.pill {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	padding: 4px 10px;
-	border: 1px solid var(--l1-border);
-	border-radius: 4px;
-	cursor: pointer;
-	max-width: 220px;
-	min-width: 120px;
-	height: 32px;
-	background: var(--l1-background);
-
-	&:hover {
-		border-color: var(--l3-border);
-	}
-}
-
-.pillText {
-	font-size: 12px;
-	color: var(--l2-foreground);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	flex: 1;
-}
-
-.pillIndicator {
-	width: 6px;
-	height: 6px;
-	border-radius: 50%;
-	background: var(--primary-background);
-	flex-shrink: 0;
-}
-
-.pillPopover {
-	max-width: 400px;
-}
-
-.pillPopoverHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-bottom: 8px;
-}
-
-.pillPopoverExpression {
-	font-family: 'Geist Mono', 'Fira Code', monospace;
-	font-size: 12px;
-	color: var(--l1-foreground);
-	word-break: break-all;
-	padding: 6px 8px;
-	background: var(--l2-background);
-	border-radius: 4px;
-}
-
-.collapseBtn {
-	flex-shrink: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	box-shadow: none;
-}
-
-.highlightErrorsToggle {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	flex-shrink: 0;
-	white-space: nowrap;
-}
-
-.preNextToggle {
-	display: flex;
-	flex-shrink: 0;
-	gap: 12px;
-}
-
-.preNextCount {
-	display: flex;
-	align-items: center;
-	margin: auto;
-	color: var(--l2-foreground);
-	font-family: 'Geist Mono';
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 18px;
-}
-
-.filterStatus {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	flex-shrink: 0;
-	color: var(--l2-foreground);
-	font-family: 'Geist Mono';
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 18px;
-}
-
-.hasError {
-	color: var(--destructive);
-	cursor: help;
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.styles.scss

@@ -0,0 +1,145 @@
+.trace-v3-filter-row {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+
+	&.expanded {
+		flex: 1;
+	}
+
+	.filter-search-container {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.query-builder-search-v2 {
+		width: 100%;
+	}
+
+	// --- Collapsed pill ---
+	.filter-pill {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		padding: 4px 10px;
+		border: 1px solid var(--l1-border);
+		border-radius: 4px;
+		cursor: pointer;
+		max-width: 220px;
+		min-width: 120px;
+		height: 32px;
+		background: var(--l1-background);
+
+		&:hover {
+			border-color: var(--l3-border);
+		}
+
+		&__text {
+			font-size: 12px;
+			color: var(--l2-foreground);
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			flex: 1;
+		}
+
+		&__indicator {
+			width: 6px;
+			height: 6px;
+			border-radius: 50%;
+			background: var(--primary-background);
+			flex-shrink: 0;
+		}
+	}
+
+	// --- Collapsed pill popover ---
+	.filter-pill-popover {
+		max-width: 400px;
+
+		&__header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-bottom: 8px;
+		}
+
+		&__expression {
+			font-family: 'Geist Mono', 'Fira Code', monospace;
+			font-size: 12px;
+			color: var(--l1-foreground);
+			word-break: break-all;
+			padding: 6px 8px;
+			background: var(--l2-background);
+			border-radius: 4px;
+		}
+	}
+
+	// --- ToggleGroup override: size to content, don't stretch items ---
+	[class*='toggle-group'] {
+		flex-shrink: 0;
+
+		[class*='toggle-group-item'] {
+			flex: 0 0 auto;
+		}
+	}
+
+	// --- Collapse button ---
+	.filter-collapse-btn {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: none;
+	}
+
+	// --- Highlight errors toggle ---
+	.highlight-errors-toggle {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		flex-shrink: 0;
+		white-space: nowrap;
+	}
+
+	// --- Prev/next navigation ---
+	.pre-next-toggle {
+		display: flex;
+		flex-shrink: 0;
+		gap: 12px;
+
+		&__count {
+			display: flex;
+			align-items: center;
+			margin: auto;
+			color: var(--l2-foreground);
+			font-family: 'Geist Mono';
+			font-size: 12px;
+			font-weight: 400;
+			line-height: 18px;
+		}
+
+		.ant-btn {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			box-shadow: none;
+		}
+	}
+
+	.filter-status {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		flex-shrink: 0;
+		color: var(--l2-foreground);
+		font-family: 'Geist Mono';
+		font-size: 12px;
+		font-weight: 400;
+		line-height: 18px;
+
+		&--error {
+			color: var(--destructive);
+			cursor: help;
+		}
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.tsx

@@ -22,7 +22,6 @@ import {
 } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import { AxiosError } from 'axios';
-import cx from 'classnames';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
@@ -43,7 +42,7 @@ import {
 	useSpanCategoryFilter,
 } from './hooks/useSpanCategoryFilter';
 
-import styles from './Filters.module.scss';
+import './Filters.styles.scss';
 
 function prepareQuery(filters: TagFilter, traceID: string): Query {
 	return {
@@ -256,7 +255,7 @@ function Filters({
 	);
 
 	const highlightErrorsToggle = (
-		<div className={styles.highlightErrorsToggle}>
+		<div className="highlight-errors-toggle">
 			<Typography.Text>Highlight errors</Typography.Text>
 			<Switch
 				color="cherry"
@@ -272,7 +271,7 @@ function Filters({
 			{error && (
 				<Tooltip>
 					<TooltipTrigger asChild>
-						<span className={cx(styles.filterStatus, styles.hasError)}>
+						<span className="filter-status filter-status--error">
 							<Info />
 							API error
 						</span>
@@ -283,7 +282,7 @@ function Filters({
 				</Tooltip>
 			)}
 			{!error && noData && (
-				<Typography.Text className={styles.filterStatus}>
+				<Typography.Text className="filter-status">
 					No results found
 				</Typography.Text>
 			)}
@@ -294,22 +293,22 @@ function Filters({
 	if (!isExpanded) {
 		const pill = (
 			/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
-			<div className={styles.pill} onClick={onExpand}>
+			<div className="filter-pill" onClick={onExpand}>
 				<Search size={12} />
-				<span className={styles.pillText}>{expression || 'Search...'}</span>
-				{expression && <span className={styles.pillIndicator} />}
+				<span className="filter-pill__text">{expression || 'Search...'}</span>
+				{expression && <span className="filter-pill__indicator" />}
 			</div>
 		);
 
 		return (
 			<TooltipProvider>
-				<div className={styles.root}>
+				<div className="trace-v3-filter-row collapsed">
 					{expression ? (
 						<Tooltip>
 							<TooltipTrigger asChild>{pill}</TooltipTrigger>
 							<TooltipContent side="bottom" align="start">
-								<div className={styles.pillPopover}>
-									<div className={styles.pillPopoverHeader}>
+								<div className="filter-pill-popover">
+									<div className="filter-pill-popover__header">
 										<Typography.Text>Search query</Typography.Text>
 										<Button
 											variant="ghost"
@@ -326,7 +325,7 @@ function Filters({
 											<Copy size={12} />
 										</Button>
 									</div>
-									<div className={styles.pillPopoverExpression}>{expression}</div>
+									<div className="filter-pill-popover__expression">{expression}</div>
 								</div>
 							</TooltipContent>
 						</Tooltip>
@@ -343,7 +342,7 @@ function Filters({
 	// --- EXPANDED VIEW ---
 	return (
 		<TooltipProvider>
-			<div className={cx(styles.root, styles.isExpanded)}>
+			<div className="trace-v3-filter-row expanded">
 				<ToggleGroup
 					type="single"
 					value={selectedCategory}
@@ -362,7 +361,7 @@ function Filters({
 				</ToggleGroup>
 				{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
 				<div
-					className={styles.searchContainer}
+					className="filter-search-container"
 					ref={containerRef}
 					onBlur={(e): void => {
 						if (!containerRef.current?.contains(e.relatedTarget as Node)) {
@@ -383,8 +382,8 @@ function Filters({
 					/>
 				</div>
 				{filteredSpanIds.length > 0 && (
-					<div className={styles.preNextToggle}>
-						<Typography.Text className={styles.preNextCount}>
+					<div className="pre-next-toggle">
+						<Typography.Text className="pre-next-toggle__count">
 							{currentSearchedIndex + 1} / {filteredSpanIds.length}
 						</Typography.Text>
 						<Button
@@ -417,7 +416,7 @@ function Filters({
 					variant="ghost"
 					size="icon"
 					color="secondary"
-					className={styles.collapseBtn}
+					className="filter-collapse-btn"
 					onClick={onCollapse}
 				>
 					<X size={14} />

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.module.scss

@@ -1,634 +0,0 @@
-// Inside a .module.scss, postcss-modules auto-scopes `@keyframes` identifiers
-// and rewrites `animation`/`animation-name` references to match.
-@keyframes waterfallLoading {
-	0% {
-		opacity: 0.3;
-		transform: scaleX(0.3);
-		transform-origin: left;
-	}
-	50% {
-		opacity: 1;
-		transform: scaleX(1);
-		transform-origin: left;
-	}
-	100% {
-		opacity: 0.3;
-		transform: scaleX(0.3);
-		transform-origin: right;
-	}
-}
-
-.loadingBar {
-	height: 2px;
-	background: var(--primary);
-	animation: waterfallLoading 1.5s ease-in-out infinite;
-	flex-shrink: 0;
-}
-
-// Event-dot tooltip. Visually matches SpanHoverCard's popover; styles are
-// inlined rather than `compose`d from another module because postcss-modules
-// loads cross-module composes through the plain CSS parser, which chokes on
-// SCSS `//` comments in the target file.
-.popover {
-	--tooltip-z-index: 1000;
-	background-color: var(--l1-background);
-	padding: 8px 12px;
-	border-radius: 4px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-	border: 1px solid var(--l2-border);
-	color: var(--l1-foreground);
-}
-
-.root {
-	overflow-y: hidden;
-	overflow-x: hidden;
-	max-width: 100%;
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-}
-
-.missingSpans {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	height: 44px;
-	margin: 16px;
-	padding: 12px;
-	border-radius: 4px;
-	background: rgba(69, 104, 220, 0.1);
-}
-
-.leftInfo {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	color: var(--bg-robin-400);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-}
-
-.text {
-	color: var(--bg-robin-400);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-}
-
-.rightInfo {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	color: var(--bg-robin-400);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-
-	&:hover {
-		background-color: unset;
-		color: var(--bg-robin-200);
-	}
-}
-
-.splitPanel {
-	flex: 1;
-	min-height: 0;
-	overflow-y: auto;
-	overflow-x: hidden;
-	padding: 0px 20px 0px 20px;
-
-	&::-webkit-scrollbar {
-		width: 0.1rem;
-	}
-}
-
-.splitHeader {
-	position: sticky;
-	top: 0;
-	z-index: 2;
-	display: flex;
-	height: 25px;
-	background-color: var(--l1-background);
-}
-
-.sidebarHeader {
-	flex-shrink: 0;
-}
-
-.resizeHandleHeader {
-	width: 4px;
-	flex-shrink: 0;
-}
-
-.statusHeader {
-	width: 50px;
-	flex-shrink: 0;
-}
-
-.timelineHeader {
-	flex: 1;
-	overflow: hidden;
-	padding: 0 15px;
-}
-
-.splitBody {
-	display: flex;
-	position: relative;
-}
-
-// Invisible IntersectionObserver targets pinned at the top and bottom of the
-// virtualized content. See `useBoundaryPagination`.
-.loadMoreSentinel {
-	position: absolute;
-	left: 0;
-	right: 0;
-	height: 1px;
-	pointer-events: none;
-}
-
-.loadMoreSentinelTop {
-	top: 0;
-}
-
-.loadMoreSentinelBottom {
-	bottom: 0;
-}
-
-.sidebar {
-	overflow-x: auto;
-	overflow-y: hidden;
-	flex-shrink: 0;
-	border-right: 1px solid var(--l1-border);
-
-	// ResizableBox child renders with a global `.resizable-box__content` class
-	// — give it independent horizontal scrolling.
-	:global(.resizable-box__content) {
-		overflow-x: auto;
-		overflow-y: hidden;
-
-		&::-webkit-scrollbar {
-			height: 0;
-		}
-
-		scrollbar-width: none;
-	}
-
-	&::-webkit-scrollbar {
-		height: 0.3rem;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--l3-background);
-		border-radius: 4px;
-	}
-}
-
-.treeTable {
-	position: relative;
-	border-collapse: collapse;
-}
-
-.treeRow {
-	display: flex;
-	align-items: center;
-}
-
-.treeCell {
-	display: flex;
-	width: 100%;
-	height: 28px;
-	align-items: center;
-	overflow: visible;
-	padding: 0;
-}
-
-.treeRow:hover,
-.treeRow.hoveredSpan {
-	border-radius: 4px;
-	background: color-mix(
-		in srgb,
-		var(--l3-background) 20%,
-		transparent
-	) !important;
-
-	.spanOverview {
-		background: unset !important;
-	}
-}
-
-.sidebarResizeHandle {
-	width: 4px;
-	flex-shrink: 0;
-	cursor: col-resize;
-	user-select: none;
-	touch-action: none;
-	background: transparent;
-	transition: background 0.15s ease;
-	z-index: 1;
-
-	&:hover,
-	&:active {
-		background: rgba(35, 196, 248, 0.2);
-	}
-}
-
-.statusCol {
-	width: 50px;
-	flex-shrink: 0;
-	position: relative;
-}
-
-.statusCell {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-
-	--badge-border-radius: 2px;
-	--badge-padding: 3px 6px;
-	--badge-line-height: 12px;
-	--badge-border-width: 0px;
-
-	&.hoveredSpan {
-		border-radius: 4px;
-		background: color-mix(
-			in srgb,
-			var(--l3-background) 20%,
-			transparent
-		) !important;
-	}
-
-	&.isInterested,
-	&.isSelectedNonMatching {
-		border-radius: 4px;
-		background: color-mix(
-			in srgb,
-			var(--l3-background) 40%,
-			transparent
-		) !important;
-	}
-
-	&.isDimmed {
-		opacity: 0.15;
-	}
-}
-
-.timeline {
-	flex: 1;
-	position: relative;
-	overflow: hidden;
-}
-
-.crosshair {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	width: 1px;
-	background: var(--l3-background);
-	pointer-events: none;
-	z-index: 1;
-}
-
-.timelineRow {
-	display: flex;
-	align-items: center;
-	// Match timelineHeader's 15px padding so bars align with ticks
-	padding: 0 15px;
-
-	&:hover,
-	&.hoveredSpan {
-		border-radius: 4px;
-		background: color-mix(
-			in srgb,
-			var(--l3-background) 20%,
-			transparent
-		) !important;
-	}
-
-	&:has(.isInterested),
-	&:has(.isSelectedNonMatching) {
-		border-radius: 4px;
-		background: color-mix(
-			in srgb,
-			var(--l3-background) 40%,
-			transparent
-		) !important;
-	}
-}
-
-.spanOverview {
-	display: flex;
-	align-items: center;
-	flex-shrink: 0;
-	height: 100%;
-	width: 100%;
-	cursor: pointer;
-	position: relative;
-	white-space: nowrap;
-
-	&:hover .rowActions {
-		opacity: 1;
-		pointer-events: auto;
-	}
-
-	&.isInterested,
-	&.isSelectedNonMatching {
-		border-radius: 4px;
-		background: color-mix(
-			in srgb,
-			var(--l3-background) 40%,
-			transparent
-		) !important;
-	}
-}
-
-.treeIndent {
-	display: inline-block;
-	flex-shrink: 0;
-}
-
-.treeLine {
-	position: absolute;
-	background-color: var(--l2-border);
-	pointer-events: none;
-}
-
-.treeConnector {
-	position: absolute;
-	width: 14px;
-	height: 50%;
-	border-left: 1px solid var(--l2-border);
-	border-bottom: 1px solid var(--l2-border);
-	border-bottom-left-radius: 6px;
-	pointer-events: none;
-}
-
-// Reserved horizontal space for the chevron — present on every row, filled
-// only when the span has children. Keeps sibling icons aligned.
-.treeArrowSlot {
-	width: 18px;
-	flex-shrink: 0;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.treeArrow {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 18px;
-	height: 18px;
-	flex-shrink: 0;
-	cursor: pointer;
-	color: var(--l1-foreground);
-	border-radius: 4px;
-
-	&:hover {
-		background: var(--l3-background);
-	}
-}
-
-// Reserved horizontal space for the subtree-count badge — same reason.
-// Right-aligns the badge inside so single-digit counts don't push the icon
-// left of where multi-digit counts would put it.
-.subtreeCountSlot {
-	min-width: 34px;
-	flex-shrink: 0;
-	display: inline-flex;
-	align-items: center;
-	justify-content: flex-end;
-	padding-right: 4px;
-}
-
-.subtreeCount {
-	display: inline-flex;
-	align-items: center;
-	flex-shrink: 0;
-
-	:global(.badge) {
-		font-size: 10px;
-		line-height: 14px;
-		padding: 0 4px;
-		height: 14px;
-	}
-}
-
-.treeIcon {
-	display: inline-block;
-	width: 7px;
-	height: 7px;
-	border-radius: 50%;
-	flex-shrink: 0;
-	margin: 0 6px;
-
-	&.hasError {
-		box-shadow: 0 0 0 2px rgba(255, 70, 70, 0.3);
-	}
-}
-
-.treeLabel {
-	color: var(--l1-foreground);
-	font-family: 'Inter';
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 28px;
-	letter-spacing: 0.01em;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	flex: 1;
-	min-width: 0;
-}
-
-.treeServiceName {
-	margin-left: 18px;
-	color: var(--l3-foreground);
-	font-weight: 400;
-}
-
-.rowActions {
-	position: sticky;
-	right: 0;
-	display: flex;
-	align-items: center;
-	gap: 2px;
-	margin-left: auto;
-	padding-right: 4px;
-	padding-left: 8px;
-	flex-shrink: 0;
-	height: 100%;
-	background: linear-gradient(to left, var(--l1-background) 60%, transparent);
-	z-index: 2;
-	opacity: 0;
-	pointer-events: none;
-}
-
-.actionBtn {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 22px;
-	height: 22px;
-	border-radius: 2px;
-	cursor: pointer;
-	color: var(--l1-foreground);
-	background: transparent;
-	border: none;
-	padding: 0;
-
-	&:hover {
-		background: var(--l3-background);
-	}
-}
-
-// Also reveal the actions when the parent tree row is hovered.
-.treeRow:hover .rowActions,
-.treeRow.hoveredSpan .rowActions {
-	opacity: 1;
-	pointer-events: auto;
-}
-
-.spanDuration {
-	display: flex;
-	align-items: center;
-	height: 28px;
-	position: relative;
-	width: 100%;
-	padding: 0 15px;
-	cursor: pointer;
-}
-
-.spanBar {
-	position: absolute;
-	height: 18px;
-	top: 5px;
-	border-radius: 2px;
-	display: flex;
-	align-items: center;
-	padding: 0 8px;
-	overflow: hidden;
-	cursor: pointer;
-	white-space: nowrap;
-	color: rgba(0, 0, 0, 0.9);
-	background-color: var(--span-color);
-	border: 1px solid transparent;
-}
-
-.spanInfo {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: 100%;
-	overflow: hidden;
-	z-index: 1;
-}
-
-.spanName {
-	font-weight: 500;
-	font-size: 11px;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	flex-grow: 1;
-	min-width: 0;
-}
-
-.spanDurationText {
-	color: inherit;
-	opacity: 0.8;
-	font-size: 10px;
-	margin-left: 8px;
-	flex-shrink: 0;
-}
-
-.eventDot {
-	position: absolute;
-	top: 50%;
-	transform: translate(-50%, -50%) rotate(45deg);
-	width: 5px;
-	height: 5px;
-	background-color: var(--event-dot-bg, var(--bg-robin-500));
-	border: 1px solid var(--event-dot-border, var(--bg-robin-600));
-	cursor: pointer;
-	z-index: 1;
-
-	&.hasError {
-		background-color: var(--destructive);
-		border-color: var(--destructive);
-	}
-
-	&:hover {
-		transform: translate(-50%, -50%) rotate(45deg) scale(1.5);
-	}
-}
-
-// Hover state: solid l2-background fill + border (matches flamegraph)
-.timelineRow:hover .spanBar,
-.timelineRow.hoveredSpan .spanBar {
-	color: var(--span-color);
-	background-color: var(--l2-background);
-	background-image: none;
-	border: 1px solid var(--span-color);
-}
-
-// Selected state: solid l3-background fill + dashed border (matches flamegraph)
-.isInterested .spanBar,
-.isSelectedNonMatching .spanBar {
-	color: var(--span-color);
-	background-color: var(--l2-background);
-	background-image: none;
-	border: 1px dashed var(--span-color);
-}
-
-.isDimmed {
-	opacity: 0.15;
-}
-
-.isHighlighted {
-	opacity: 1;
-}
-
-.isSelectedNonMatching {
-	.treeLabel {
-		opacity: 0.5;
-	}
-}
-
-// `.spanBar` text color is the one place where semantic tokens don't fit
-// cleanly: in dark mode the bar's bright `--span-color` background needs dark
-// text; in light mode `generateColor` produces darker bar fills, so the text
-// must flip to white.
-:global(.lightMode) {
-	.root {
-		.spanDuration .spanBar {
-			color: rgba(255, 255, 255, 0.9);
-		}
-
-		.timelineRow:hover .spanBar,
-		.timelineRow.hoveredSpan .spanBar,
-		.isInterested .spanBar,
-		.isSelectedNonMatching .spanBar {
-			color: var(--span-color);
-		}
-	}
-}
-
-// Tooltips for the row's hover-revealed action buttons (Copy / Add to Funnel).
-// Bumped above FloatingPanel (z-index 999) so they stay visible when the
-// SpanDetailsPanel is docked as a floating panel.
-.actionTooltip {
-	--tooltip-z-index: 1000;
-}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.styles.scss

@@ -0,0 +1,636 @@
+.waterfall-loading-bar {
+	height: 2px;
+	background: var(--primary);
+	animation: waterfall-loading 1.5s ease-in-out infinite;
+	flex-shrink: 0;
+}
+
+@keyframes waterfall-loading {
+	0% {
+		opacity: 0.3;
+		transform: scaleX(0.3);
+		transform-origin: left;
+	}
+	50% {
+		opacity: 1;
+		transform: scaleX(1);
+		transform-origin: left;
+	}
+	100% {
+		opacity: 0.3;
+		transform: scaleX(0.3);
+		transform-origin: right;
+	}
+}
+
+.success-content {
+	overflow-y: hidden;
+	overflow-x: hidden;
+	max-width: 100%;
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+
+	.missing-spans {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 44px;
+		margin: 16px;
+		padding: 12px;
+		border-radius: 4px;
+		background: rgba(69, 104, 220, 0.1);
+
+		.left-info {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			color: var(--bg-robin-400);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
+			letter-spacing: -0.07px;
+
+			.text {
+				color: var(--bg-robin-400);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+		}
+
+		.right-info {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 8px;
+			color: var(--bg-robin-400);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
+			letter-spacing: -0.07px;
+		}
+
+		.right-info:hover {
+			background-color: unset;
+			color: var(--bg-robin-200);
+		}
+	}
+
+	.waterfall-split-panel {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		overflow-x: hidden;
+		padding: 0px 20px 0px 20px;
+
+		&::-webkit-scrollbar {
+			width: 0.1rem;
+		}
+	}
+
+	.waterfall-split-header {
+		position: sticky;
+		top: 0;
+		z-index: 2;
+		display: flex;
+		height: 25px;
+		background-color: var(--l1-background);
+
+		.sidebar-header {
+			flex-shrink: 0;
+		}
+
+		.resize-handle-header {
+			width: 4px;
+			flex-shrink: 0;
+		}
+
+		.status-header {
+			width: 50px;
+			flex-shrink: 0;
+		}
+
+		.timeline-header {
+			flex: 1;
+			overflow: hidden;
+			padding: 0 15px;
+		}
+	}
+
+	.waterfall-split-body {
+		display: flex;
+		position: relative;
+	}
+
+	// Invisible IntersectionObserver targets pinned at the top and bottom of
+	// the virtualized content. See `useBoundaryPagination`.
+	.waterfall-load-more-sentinel {
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 1px;
+		pointer-events: none;
+
+		&--top {
+			top: 0;
+		}
+
+		&--bottom {
+			bottom: 0;
+		}
+	}
+
+	.waterfall-sidebar {
+		overflow-x: auto;
+		overflow-y: hidden;
+		flex-shrink: 0;
+		border-right: 1px solid var(--l1-border);
+
+		.resizable-box__content {
+			overflow-x: auto;
+			overflow-y: hidden;
+
+			&::-webkit-scrollbar {
+				height: 0;
+			}
+
+			scrollbar-width: none;
+		}
+
+		&::-webkit-scrollbar {
+			height: 0.3rem;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--l3-background);
+			border-radius: 4px;
+		}
+	}
+
+	.span-tree-table {
+		position: relative;
+		border-collapse: collapse;
+
+		.span-tree-row {
+			display: flex;
+			align-items: center;
+		}
+
+		.span-tree-cell {
+			display: flex;
+			width: 100%;
+			height: 28px;
+			align-items: center;
+			overflow: visible;
+			padding: 0;
+		}
+
+		.span-tree-row:hover,
+		.span-tree-row.hovered-span {
+			border-radius: 4px;
+			background: color-mix(
+				in srgb,
+				var(--l3-background) 20%,
+				transparent
+			) !important;
+
+			.span-overview {
+				background: unset !important;
+			}
+		}
+	}
+
+	.sidebar-resize-handle {
+		width: 4px;
+		flex-shrink: 0;
+		cursor: col-resize;
+		user-select: none;
+		touch-action: none;
+		background: transparent;
+		transition: background 0.15s ease;
+		z-index: 1;
+
+		&:hover,
+		&:active {
+			background: rgba(35, 196, 248, 0.2);
+		}
+	}
+
+	.waterfall-status-col {
+		width: 50px;
+		flex-shrink: 0;
+		position: relative;
+
+		.status-cell {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+
+			--badge-border-radius: 2px;
+			--badge-padding: 3px 6px;
+			--badge-line-height: 12px;
+			--badge-border-width: 0px;
+
+			&.hovered-span {
+				border-radius: 4px;
+				background: color-mix(
+					in srgb,
+					var(--l3-background) 20%,
+					transparent
+				) !important;
+			}
+
+			&.interested-span,
+			&.selected-non-matching-span {
+				border-radius: 4px;
+				background: color-mix(
+					in srgb,
+					var(--l3-background) 40%,
+					transparent
+				) !important;
+			}
+
+			&.dimmed-span {
+				opacity: 0.15;
+			}
+		}
+	}
+
+	.waterfall-timeline {
+		flex: 1;
+		position: relative;
+		overflow: hidden;
+
+		.waterfall-crosshair {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			width: 1px;
+			background: var(--l3-background);
+			pointer-events: none;
+			z-index: 1;
+		}
+
+		.timeline-row {
+			display: flex;
+			align-items: center;
+			// Match timeline-header's 15px padding so bars align with ticks
+			padding: 0 15px;
+		}
+
+		.timeline-row:hover,
+		.timeline-row.hovered-span {
+			border-radius: 4px;
+			background: color-mix(
+				in srgb,
+				var(--l3-background) 20%,
+				transparent
+			) !important;
+		}
+
+		.timeline-row:has(.interested-span),
+		.timeline-row:has(.selected-non-matching-span) {
+			border-radius: 4px;
+			background: color-mix(
+				in srgb,
+				var(--l3-background) 40%,
+				transparent
+			) !important;
+		}
+	}
+
+	// Shared span component styles (used in both panels)
+	.span-overview {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		height: 100%;
+		width: 100%;
+		cursor: pointer;
+		position: relative;
+		white-space: nowrap;
+
+		.tree-indent {
+			display: inline-block;
+			flex-shrink: 0;
+		}
+
+		.tree-line {
+			position: absolute;
+			background-color: var(--l2-border);
+			pointer-events: none;
+		}
+
+		.tree-connector {
+			position: absolute;
+			width: 14px;
+			height: 50%;
+			border-left: 1px solid var(--l2-border);
+			border-bottom: 1px solid var(--l2-border);
+			border-bottom-left-radius: 6px;
+			pointer-events: none;
+		}
+
+		// Reserved horizontal space for the chevron — present on every row,
+		// filled only when the span has children. Keeps sibling icons aligned.
+		.tree-arrow-slot {
+			width: 18px;
+			flex-shrink: 0;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.tree-arrow {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			width: 18px;
+			height: 18px;
+			flex-shrink: 0;
+			cursor: pointer;
+			color: var(--l1-foreground);
+			border-radius: 4px;
+
+			&:hover {
+				background: var(--l3-background);
+			}
+		}
+
+		// Reserved horizontal space for the subtree-count badge — same reason.
+		// Right-aligns the badge inside so single-digit counts don't push the
+		// icon left of where multi-digit counts would put it.
+		.subtree-count-slot {
+			min-width: 34px;
+			flex-shrink: 0;
+			display: inline-flex;
+			align-items: center;
+			justify-content: flex-end;
+			padding-right: 4px;
+		}
+
+		.subtree-count {
+			display: inline-flex;
+			align-items: center;
+			flex-shrink: 0;
+
+			.badge {
+				font-size: 10px;
+				line-height: 14px;
+				padding: 0 4px;
+				height: 14px;
+			}
+		}
+
+		.tree-icon {
+			display: inline-block;
+			width: 7px;
+			height: 7px;
+			border-radius: 50%;
+			flex-shrink: 0;
+			margin: 0 6px;
+
+			&.is-error {
+				box-shadow: 0 0 0 2px rgba(255, 70, 70, 0.3);
+			}
+		}
+
+		.tree-label {
+			color: var(--l1-foreground);
+			font-family: 'Inter';
+			font-size: 13px;
+			font-weight: 400;
+			line-height: 28px;
+			letter-spacing: 0.01em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			flex: 1;
+			min-width: 0;
+
+			.tree-service-name {
+				margin-left: 18px;
+				color: var(--l3-foreground);
+				font-weight: 400;
+			}
+		}
+
+		.span-row-actions {
+			position: sticky;
+			right: 0;
+			display: flex;
+			align-items: center;
+			gap: 2px;
+			margin-left: auto;
+			padding-right: 4px;
+			padding-left: 8px;
+			flex-shrink: 0;
+			height: 100%;
+			background: linear-gradient(to left, var(--l1-background) 60%, transparent);
+			z-index: 2;
+			opacity: 0;
+			pointer-events: none;
+
+			.span-action-btn {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 22px;
+				height: 22px;
+				border-radius: 2px;
+				cursor: pointer;
+				color: var(--l1-foreground);
+				background: transparent;
+				border: none;
+				padding: 0;
+
+				&:hover {
+					background: var(--l3-background);
+				}
+			}
+		}
+
+		&:hover .span-row-actions {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
+
+	// Also show action buttons when hovering the tree row (parent of span-overview)
+	.span-tree-row:hover .span-row-actions,
+	.span-tree-row.hovered-span .span-row-actions {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	.span-duration {
+		display: flex;
+		align-items: center;
+		height: 28px;
+		position: relative;
+		width: 100%;
+		padding: 0 15px;
+		cursor: pointer;
+
+		.span-bar {
+			position: absolute;
+			height: 18px;
+			top: 5px;
+			border-radius: 2px;
+			display: flex;
+			align-items: center;
+			padding: 0 8px;
+			overflow: hidden;
+			cursor: pointer;
+			white-space: nowrap;
+			color: rgba(0, 0, 0, 0.9);
+			background-color: var(--span-color);
+			border: 1px solid transparent;
+
+			.span-info {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				width: 100%;
+				overflow: hidden;
+				z-index: 1;
+
+				.span-name {
+					font-weight: 500;
+					font-size: 11px;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					flex-grow: 1;
+					min-width: 0;
+				}
+
+				.span-duration-text {
+					color: inherit;
+					opacity: 0.8;
+					font-size: 10px;
+					margin-left: 8px;
+					flex-shrink: 0;
+				}
+			}
+		}
+
+		.event-dot {
+			position: absolute;
+			top: 50%;
+			transform: translate(-50%, -50%) rotate(45deg);
+			width: 5px;
+			height: 5px;
+			background-color: var(--event-dot-bg, var(--bg-robin-500));
+			border: 1px solid var(--event-dot-border, var(--bg-robin-600));
+			cursor: pointer;
+			z-index: 1;
+
+			&.error {
+				background-color: var(--destructive);
+				border-color: var(--destructive);
+			}
+
+			&:hover {
+				transform: translate(-50%, -50%) rotate(45deg) scale(1.5);
+			}
+		}
+	}
+
+	// Hover state: solid l2-background fill + border (matches flamegraph)
+	.timeline-row:hover .span-bar,
+	.timeline-row.hovered-span .span-bar {
+		color: var(--span-color);
+		background-color: var(--l2-background);
+		background-image: none;
+		border: 1px solid var(--span-color);
+	}
+
+	// Selected state: solid l3-background fill + dashed border (matches flamegraph)
+	.interested-span .span-bar,
+	.selected-non-matching-span .span-bar {
+		color: var(--span-color);
+		background-color: var(--l2-background);
+		background-image: none;
+		border: 1px dashed var(--span-color);
+	}
+
+	// Shared state classes for both panels
+	// Background highlight for selection is on .timeline-row via :has() — see .waterfall-timeline
+	// Only apply on .span-overview (left panel) where there's no parent row with :has()
+	.span-overview.interested-span,
+	.span-overview.selected-non-matching-span {
+		border-radius: 4px;
+		background: color-mix(
+			in srgb,
+			var(--l3-background) 40%,
+			transparent
+		) !important;
+	}
+
+	.dimmed-span {
+		opacity: 0.15;
+	}
+	.highlighted-span {
+		opacity: 1;
+	}
+
+	.selected-non-matching-span {
+		.tree-label {
+			opacity: 0.5;
+		}
+	}
+}
+
+.span-dets {
+	.related-logs {
+		display: flex;
+		width: 160px;
+		padding: 4px 8px;
+		justify-content: center;
+		align-items: center;
+		gap: 8px;
+		border-radius: 2px;
+		border: 1px solid var(--l1-border);
+		background: var(--l2-background);
+		box-shadow: none;
+	}
+}
+
+// `.span-bar` text color is the one place where semantic tokens don't fit
+// cleanly: in dark mode the bar's bright `--span-color` background needs dark
+// text; in light mode `generateColor` produces darker bar fills, so the text
+// must flip to white. This is the only `.lightMode` carve-out left after the
+// migration to semantic tokens — the hover/selected rules are repeated here
+// to beat the default-state rule's specificity inside `.lightMode`.
+.lightMode {
+	.success-content {
+		.span-duration .span-bar {
+			color: rgba(255, 255, 255, 0.9);
+		}
+
+		.timeline-row:hover .span-bar,
+		.timeline-row.hovered-span .span-bar,
+		.interested-span .span-bar,
+		.selected-non-matching-span .span-bar {
+			color: var(--span-color);
+		}
+	}
+}
+
+// Tooltips for the row's hover-revealed action buttons (Copy / Add to Funnel).
+// Bumped above FloatingPanel (z-index 999) so they stay visible when the
+// SpanDetailsPanel is docked as a floating panel.
+.span-action-tooltip {
+	--tooltip-z-index: 1000;
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx

@@ -53,7 +53,7 @@ import { SpanHoverCard } from '../../../SpanHoverCard/SpanHoverCard';
 import AddSpanToFunnelModal from '../../AddSpanToFunnelModal/AddSpanToFunnelModal';
 import { IInterestedSpan } from '../../types';
 
-import styles from './Success.module.scss';
+import './Success.styles.scss';
 
 /**
  * Lazy event dot — only mounts the tooltip when the user hovers.
@@ -91,7 +91,7 @@ const LazyEventDotPopover = memo(function LazyEventDotPopover({
 
 	const dot = (
 		<div
-			className={cx(styles.eventDot, isError && styles.hasError)}
+			className={`event-dot ${isError ? 'error' : ''}`}
 			style={
 				{
 					left: `${dotLeft}%`,
@@ -121,7 +121,7 @@ const LazyEventDotPopover = memo(function LazyEventDotPopover({
 				}}
 			>
 				<TooltipTrigger asChild>{dot}</TooltipTrigger>
-				<TooltipContent className={styles.popover}>
+				<TooltipContent className="span-hover-card-popover">
 					<EventTooltipContent
 						eventName={event.name}
 						timeOffsetMs={eventTimeMs - spanTimestamp}
@@ -243,11 +243,11 @@ const SpanOverview = memo(function SpanOverview({
 
 	return (
 		<div
-			className={cx(styles.spanOverview, {
-				[styles.isInterested]: isSelected && (!isFilterActive || isMatching),
-				[styles.isHighlighted]: isHighlighted,
-				[styles.isSelectedNonMatching]: isSelectedNonMatching,
-				[styles.isDimmed]: isDimmed,
+			className={cx('span-overview', {
+				'interested-span': isSelected && (!isFilterActive || isMatching),
+				'highlighted-span': isHighlighted,
+				'selected-non-matching-span': isSelectedNonMatching,
+				'dimmed-span': isDimmed,
 			})}
 			onClick={(): void => handleSpanClick(span)}
 			onMouseEnter={(): void => onHoverEnter(span.span_id)}
@@ -264,7 +264,7 @@ const SpanOverview = memo(function SpanOverview({
 						return (
 							<div
 								key={lvl}
-								className={styles.treeLine}
+								className="tree-line"
 								style={{
 									left: xPos,
 									top: 0,
@@ -277,25 +277,25 @@ const SpanOverview = memo(function SpanOverview({
 					return (
 						<div key={lvl}>
 							<div
-								className={styles.treeLine}
+								className="tree-line"
 								style={{ left: xPos, top: 0, width: 1, height: '50%' }}
 							/>
-							<div className={styles.treeConnector} style={{ left: xPos, top: 0 }} />
+							<div className="tree-connector" style={{ left: xPos, top: 0 }} />
 						</div>
 					);
 				})}
 
 			{/* Indent spacer */}
-			<span className={styles.treeIndent} style={{ width: `${indentWidth}px` }} />
+			<span className="tree-indent" style={{ width: `${indentWidth}px` }} />
 
 			{/* Expand/collapse arrow + child count slots — always render the
 				    slots, fill them only when the span has children. Reserving the
 				    horizontal space on leaf rows aligns sibling icons regardless
 				    of whether each sibling is a parent or a leaf. */}
-			<span className={styles.treeArrowSlot}>
+			<span className="tree-arrow-slot">
 				{span.has_children && (
 					<span
-						className={styles.treeArrow}
+						className={cx('tree-arrow', { expanded: !isSpanCollapsed })}
 						onClick={(event): void => {
 							event.stopPropagation();
 							event.preventDefault();
@@ -306,9 +306,9 @@ const SpanOverview = memo(function SpanOverview({
 					</span>
 				)}
 			</span>
-			<span className={styles.subtreeCountSlot}>
+			<span className="subtree-count-slot">
 				{span.has_children && (
-					<span className={styles.subtreeCount}>
+					<span className="subtree-count">
 						<Badge color="vanilla">{span.sub_tree_node_count}</Badge>
 					</span>
 				)}
@@ -316,18 +316,18 @@ const SpanOverview = memo(function SpanOverview({
 
 			{/* Colored service dot */}
 			<span
-				className={cx(styles.treeIcon, { [styles.hasError]: span.has_error })}
+				className={cx('tree-icon', { 'is-error': span.has_error })}
 				style={{ backgroundColor: color }}
 			/>
 
 			{/* Span name + service name */}
-			<span className={styles.treeLabel}>
+			<span className="tree-label">
 				{span.name}
-				<span className={styles.treeServiceName}>{span['service.name']}</span>
+				<span className="tree-service-name">{span['service.name']}</span>
 			</span>
 
 			{/* Action buttons — shown on hover via CSS, right-aligned */}
-			<span className={styles.rowActions}>
+			<span className="span-row-actions">
 				<TooltipProvider delayDuration={200}>
 					<Tooltip>
 						<TooltipTrigger asChild>
@@ -335,13 +335,13 @@ const SpanOverview = memo(function SpanOverview({
 								variant="ghost"
 								size="icon"
 								color="secondary"
-								className={styles.actionBtn}
+								className="span-action-btn"
 								onClick={onSpanCopy}
 							>
 								<Link size={12} />
 							</Button>
 						</TooltipTrigger>
-						<TooltipContent className={styles.actionTooltip}>
+						<TooltipContent className="span-action-tooltip">
 							Copy Span Link
 						</TooltipContent>
 					</Tooltip>
@@ -351,13 +351,13 @@ const SpanOverview = memo(function SpanOverview({
 								variant="ghost"
 								size="icon"
 								color="secondary"
-								className={styles.actionBtn}
+								className="span-action-btn"
 								onClick={handleFunnelClick}
 							>
 								<ListPlus size={12} />
 							</Button>
 						</TooltipTrigger>
-						<TooltipContent className={styles.actionTooltip}>
+						<TooltipContent className="span-action-tooltip">
 							Add to Trace Funnel
 						</TooltipContent>
 					</Tooltip>
@@ -410,16 +410,16 @@ export const SpanDuration = memo(function SpanDuration({
 
 	return (
 		<div
-			className={cx(styles.spanDuration, {
-				[styles.isInterested]: isSelected && (!isFilterActive || isMatching),
-				[styles.isHighlighted]: isHighlighted,
-				[styles.isSelectedNonMatching]: isSelectedNonMatching,
-				[styles.isDimmed]: isDimmed,
+			className={cx('span-duration', {
+				'interested-span': isSelected && (!isFilterActive || isMatching),
+				'highlighted-span': isHighlighted,
+				'selected-non-matching-span': isSelectedNonMatching,
+				'dimmed-span': isDimmed,
 			})}
 			onClick={(): void => handleSpanClick(span)}
 		>
 			<div
-				className={styles.spanBar}
+				className="span-bar"
 				style={
 					{
 						left: `${leftOffset}%`,
@@ -429,9 +429,9 @@ export const SpanDuration = memo(function SpanDuration({
 					} as React.CSSProperties
 				}
 			>
-				<span className={styles.spanInfo}>
-					<span className={styles.spanName}>{span.name}</span>
-					<span className={styles.spanDurationText}>{`${toFixed(
+				<span className="span-info">
+					<span className="span-name">{span.name}</span>
+					<span className="span-duration-text">{`${toFixed(
 						time,
 						2,
 					)} ${timeUnitName}`}</span>
@@ -529,11 +529,11 @@ function Success(props: ISuccessProps): JSX.Element {
 
 		if (prev) {
 			const prevElements = document.querySelectorAll(`[data-span-id="${prev}"]`);
-			prevElements.forEach((el) => el.classList.remove(styles.hoveredSpan));
+			prevElements.forEach((el) => el.classList.remove('hovered-span'));
 		}
 		if (spanId) {
 			const nextElements = document.querySelectorAll(`[data-span-id="${spanId}"]`);
-			nextElements.forEach((el) => el.classList.add(styles.hoveredSpan));
+			nextElements.forEach((el) => el.classList.add('hovered-span'));
 		}
 		prevHoveredSpanIdRef.current = spanId;
 	}, []);
@@ -798,17 +798,17 @@ function Success(props: ISuccessProps): JSX.Element {
 	}, []);
 
 	return (
-		<div className={styles.root}>
+		<div className="success-content">
 			{traceMetadata.hasMissingSpans && (
-				<div className={styles.missingSpans}>
-					<section className={styles.leftInfo}>
+				<div className="missing-spans">
+					<section className="left-info">
 						<CircleAlert size={14} />
-						<span className={styles.text}>This trace has missing spans</span>
+						<span className="text">This trace has missing spans</span>
 					</section>
 					<Button
 						variant="ghost"
 						color="secondary"
-						className={styles.rightInfo}
+						className="right-info"
 						suffix={<ArrowUpRight size={14} />}
 						onClick={(): WindowProxy | null =>
 							window.open(
@@ -821,17 +821,17 @@ function Success(props: ISuccessProps): JSX.Element {
 					</Button>
 				</div>
 			)}
-			{isFetching && <div className={styles.loadingBar} />}
-			<div className={styles.splitPanel} ref={scrollContainerRef}>
+			{isFetching && <div className="waterfall-loading-bar" />}
+			<div className="waterfall-split-panel" ref={scrollContainerRef}>
 				{/* Sticky header row */}
-				<div className={styles.splitHeader}>
+				<div className="waterfall-split-header">
 					<div
-						className={styles.sidebarHeader}
+						className="sidebar-header"
 						style={{ width: sidebarWidth, flexShrink: 0 }}
 					/>
-					<div className={styles.resizeHandleHeader} />
-					<div className={styles.statusHeader} />
-					<div className={styles.timelineHeader}>
+					<div className="resize-handle-header" />
+					<div className="status-header" />
+					<div className="timeline-header">
 						<TimelineV3
 							startTimestamp={traceMetadata.startTime}
 							endTimestamp={traceMetadata.endTime}
@@ -844,7 +844,7 @@ function Success(props: ISuccessProps): JSX.Element {
 
 				{/* Split body */}
 				<div
-					className={styles.splitBody}
+					className="waterfall-split-body"
 					style={{
 						minHeight: virtualizer.getTotalSize(),
 						height: '100%',
@@ -854,11 +854,11 @@ function Success(props: ISuccessProps): JSX.Element {
 					    fires a load-more via useBoundaryPagination. */}
 					<div
 						ref={loadMoreTopSentinelRef}
-						className={cx(styles.loadMoreSentinel, styles.loadMoreSentinelTop)}
+						className="waterfall-load-more-sentinel waterfall-load-more-sentinel--top"
 					/>
 					<div
 						ref={loadMoreBottomSentinelRef}
-						className={cx(styles.loadMoreSentinel, styles.loadMoreSentinelBottom)}
+						className="waterfall-load-more-sentinel waterfall-load-more-sentinel--bottom"
 					/>
 					<SpanHoverCard
 						hoveredSpanId={hoveredSpanId}
@@ -875,9 +875,9 @@ function Success(props: ISuccessProps): JSX.Element {
 						minWidth={MIN_SIDEBAR_WIDTH}
 						maxWidth={MAX_SIDEBAR_WIDTH}
 						onResize={setSidebarWidth}
-						className={styles.sidebar}
+						className="waterfall-sidebar"
 					>
-						<table className={styles.treeTable} style={{ width: maxContentWidth }}>
+						<table className="span-tree-table" style={{ width: maxContentWidth }}>
 							<tbody>
 								{virtualItems.map((virtualRow) => {
 									const row = leftRows[virtualRow.index];
@@ -887,7 +887,7 @@ function Success(props: ISuccessProps): JSX.Element {
 											key={String(virtualRow.key)}
 											data-testid={`cell-0-${span.span_id}`}
 											data-span-id={span.span_id}
-											className={styles.treeRow}
+											className="span-tree-row"
 											style={{
 												position: 'absolute',
 												top: 0,
@@ -900,7 +900,7 @@ function Success(props: ISuccessProps): JSX.Element {
 											onMouseLeave={handleRowMouseLeave}
 										>
 											{row.getVisibleCells().map((cell) => (
-												<td key={cell.id} className={styles.treeCell}>
+												<td key={cell.id} className="span-tree-cell">
 													{flexRender(cell.column.columnDef.cell, cell.getContext())}
 												</td>
 											))}
@@ -912,7 +912,7 @@ function Success(props: ISuccessProps): JSX.Element {
 					</ResizableBox>
 
 					{/* Status code column */}
-					<div className={styles.statusCol}>
+					<div className="waterfall-status-col">
 						{virtualItems.map((virtualRow) => {
 							const span = spans[virtualRow.index];
 							const { isSelected, isDimmed, isSelectedNonMatching, isMatching } =
@@ -925,10 +925,10 @@ function Success(props: ISuccessProps): JSX.Element {
 							return (
 								<div
 									key={`status-${String(virtualRow.key)}`}
-									className={cx(styles.statusCell, {
-										[styles.isInterested]: isSelected && (!isFilterActive || isMatching),
-										[styles.isDimmed]: isDimmed,
-										[styles.isSelectedNonMatching]: isSelectedNonMatching,
+									className={cx('status-cell', {
+										'interested-span': isSelected && (!isFilterActive || isMatching),
+										'dimmed-span': isDimmed,
+										'selected-non-matching-span': isSelectedNonMatching,
 									})}
 									style={{
 										position: 'absolute',
@@ -953,13 +953,13 @@ function Success(props: ISuccessProps): JSX.Element {
 
 					{/* Right panel - timeline bars */}
 					<div
-						className={styles.timeline}
+						className="waterfall-timeline"
 						ref={timelineAreaRef}
 						onMouseMove={onCrosshairMove}
 						onMouseLeave={onCrosshairLeave}
 					>
 						{cursorX !== null && (
-							<div className={styles.crosshair} style={{ left: cursorX }} />
+							<div className="waterfall-crosshair" style={{ left: cursorX }} />
 						)}
 						{virtualItems.map((virtualRow) => {
 							const span = spans[virtualRow.index];
@@ -968,7 +968,7 @@ function Success(props: ISuccessProps): JSX.Element {
 									key={String(virtualRow.key)}
 									data-testid={`cell-1-${span.span_id}`}
 									data-span-id={span.span_id}
-									className={styles.timelineRow}
+									className="timeline-row"
 									style={{
 										position: 'absolute',
 										top: 0,

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/__tests__/SpanDuration.test.tsx

@@ -2,33 +2,18 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import { fireEvent, render, screen } from 'tests/test-utils';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 
-// Local identity-proxy mock for this module so `styles.foo` resolves to
-// `'foo'` in test assertions. The global `__mocks__/cssMock.ts` stays as
-// `export default {}`; we override resolution for this specific file only.
-jest.mock(
-	'../Success.module.scss',
-	() =>
-		new Proxy(
-			{},
-			{
-				get: (_target, prop): string | undefined =>
-					typeof prop === 'string' && prop !== '__esModule' ? prop : undefined,
-			},
-		),
-);
-
 import { SpanDuration } from '../Success';
-import successStyles from '../Success.module.scss';
 
 const renderWithTraceProvider: typeof render = (ui, options) =>
 	render(ui, options);
 
+// Constants to avoid string duplication
 const SPAN_DURATION_TEXT = '1.16 ms';
-const SPAN_DURATION_CLASS = `.${successStyles.spanDuration}`;
-const INTERESTED_SPAN_CLASS = successStyles.isInterested;
-const HIGHLIGHTED_SPAN_CLASS = successStyles.isHighlighted;
-const DIMMED_SPAN_CLASS = successStyles.isDimmed;
-const SELECTED_NON_MATCHING_SPAN_CLASS = successStyles.isSelectedNonMatching;
+const SPAN_DURATION_CLASS = '.span-duration';
+const INTERESTED_SPAN_CLASS = 'interested-span';
+const HIGHLIGHTED_SPAN_CLASS = 'highlighted-span';
+const DIMMED_SPAN_CLASS = 'dimmed-span';
+const SELECTED_NON_MATCHING_SPAN_CLASS = 'selected-non-matching-span';
 
 jest.mock('components/TimelineV3/TimelineV3', () => ({
 	__esModule: true,
@@ -142,7 +127,10 @@ describe('SpanDuration', () => {
 
 		const spanElement = screen.getByText(SPAN_DURATION_TEXT);
 
+		// Hover over the span should add hovered-span class
 		fireEvent.mouseEnter(spanElement);
+
+		// Mouse leave should remove hovered-span class
 		fireEvent.mouseLeave(spanElement);
 	});
 
@@ -271,8 +259,8 @@ describe('SpanDuration', () => {
 				traceMetadata={mockTraceMetadata}
 				selectedSpan={undefined}
 				handleSpanClick={mockSetSelectedSpan}
-				filteredSpanIds={[]}
-				isFilterActive
+				filteredSpanIds={[]} // Empty array but filter is active
+				isFilterActive // This is the key difference
 			/>,
 		);
 

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/__tests__/UnifiedSpanClick.test.tsx

@@ -2,23 +2,7 @@ import React from 'react';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 
-// Local identity-proxy mock for this module so `styles.foo` resolves to
-// `'foo'` in test assertions. The global `__mocks__/cssMock.ts` stays as
-// `export default {}`; we override resolution for this specific file only.
-jest.mock(
-	'../Success.module.scss',
-	() =>
-		new Proxy(
-			{},
-			{
-				get: (_target, prop): string | undefined =>
-					typeof prop === 'string' && prop !== '__esModule' ? prop : undefined,
-			},
-		),
-);
-
 import Success from '../Success';
-import successStyles from '../Success.module.scss';
 
 const renderWithTraceProvider: typeof render = (ui, options, customOptions) =>
 	render(ui, options, customOptions);
@@ -227,10 +211,10 @@ describe('Span Click User Flows', () => {
 	const FIRST_SPAN_TEST_ID = 'cell-0-span-1';
 	const FIRST_SPAN_DURATION_TEST_ID = 'cell-1-span-1';
 	const SECOND_SPAN_TEST_ID = 'cell-0-span-2';
+	const SPAN_OVERVIEW_CLASS = '.span-overview';
+	const SPAN_DURATION_CLASS = '.span-duration';
+	const INTERESTED_SPAN_CLASS = 'interested-span';
 	const SECOND_SPAN_DURATION_TEST_ID = 'cell-1-span-2';
-	const SPAN_OVERVIEW_CLASS = `.${successStyles.spanOverview}`;
-	const SPAN_DURATION_CLASS = `.${successStyles.spanDuration}`;
-	const INTERESTED_SPAN_CLASS = successStyles.isInterested;
 
 	beforeEach(() => {
 		jest.clearAllMocks();
@@ -284,6 +268,7 @@ describe('Span Click User Flows', () => {
 			initialRoute: '/trace',
 		});
 
+		// Wait for initial render and selection
 		await waitFor(() => {
 			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
 			const spanDurationElement = spanDuration.querySelector(
@@ -292,12 +277,14 @@ describe('Span Click User Flows', () => {
 			expect(spanDurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
 		});
 
+		// Click on span-2 to test selection change
 		const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
 		const span2DurationElement = span2Duration.querySelector(
 			SPAN_DURATION_CLASS,
 		) as HTMLElement;
 		await user.click(span2DurationElement);
 
+		// Wait for the state update and re-render
 		await waitFor(() => {
 			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
 			const spanDurationElement = spanDuration.querySelector(
@@ -320,6 +307,7 @@ describe('Span Click User Flows', () => {
 			initialRoute: '/trace',
 		});
 
+		// Wait for initial render and selection
 		await waitFor(() => {
 			const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
 			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
@@ -330,16 +318,19 @@ describe('Span Click User Flows', () => {
 				SPAN_DURATION_CLASS,
 			) as HTMLElement;
 
+			// Initially both areas should show the same visual selection (first span is auto-selected)
 			expect(spanOverviewElement).toHaveClass(INTERESTED_SPAN_CLASS);
 			expect(spanDurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
 		});
 
+		// Click span-2 to test selection change
 		const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
 		const span2Element = span2Overview.querySelector(
 			SPAN_OVERVIEW_CLASS,
 		) as HTMLElement;
 		await user.click(span2Element);
 
+		// Wait for the state update and re-render
 		await waitFor(() => {
 			const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
 			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
@@ -350,15 +341,17 @@ describe('Span Click User Flows', () => {
 				SPAN_DURATION_CLASS,
 			) as HTMLElement;
 
+			// Now span-2 should be selected, span-1 should not
 			expect(spanOverviewElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
 			expect(spanDurationElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
 
-			const span2OverviewSub = screen.getByTestId(SECOND_SPAN_TEST_ID);
-			const span2DurationSub = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
-			const span2OverviewElement = span2OverviewSub.querySelector(
+			// Check that span-2 is selected
+			const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
+			const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
+			const span2OverviewElement = span2Overview.querySelector(
 				SPAN_OVERVIEW_CLASS,
 			) as HTMLElement;
-			const span2DurationElement = span2DurationSub.querySelector(
+			const span2DurationElement = span2Duration.querySelector(
 				SPAN_DURATION_CLASS,
 			) as HTMLElement;
 
@@ -374,6 +367,7 @@ describe('Span Click User Flows', () => {
 			initialRoute: '/trace',
 		});
 
+		// Wait for initial render and selection
 		await waitFor(() => {
 			const span1Overview = screen.getByTestId(FIRST_SPAN_TEST_ID);
 			const span1Element = span1Overview.querySelector(
@@ -382,24 +376,27 @@ describe('Span Click User Flows', () => {
 			expect(span1Element).toHaveClass(INTERESTED_SPAN_CLASS);
 		});
 
+		// Click second span
 		const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
 		const span2Element = span2Overview.querySelector(
 			SPAN_OVERVIEW_CLASS,
 		) as HTMLElement;
 		await user.click(span2Element);
 
+		// Wait for the state update and re-render
 		await waitFor(() => {
 			const span1Overview = screen.getByTestId(FIRST_SPAN_TEST_ID);
 			const span1Element = span1Overview.querySelector(
 				SPAN_OVERVIEW_CLASS,
 			) as HTMLElement;
-			const span2OverviewSub = screen.getByTestId(SECOND_SPAN_TEST_ID);
-			const span2ElementSub = span2OverviewSub.querySelector(
+			const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
+			const span2Element = span2Overview.querySelector(
 				SPAN_OVERVIEW_CLASS,
 			) as HTMLElement;
 
+			// Second span should be selected, first should not
 			expect(span1Element).not.toHaveClass(INTERESTED_SPAN_CLASS);
-			expect(span2ElementSub).toHaveClass(INTERESTED_SPAN_CLASS);
+			expect(span2Element).toHaveClass(INTERESTED_SPAN_CLASS);
 		});
 	});
 
@@ -429,6 +426,7 @@ describe('Span Click User Flows', () => {
 			{ initialRoute: '/trace' },
 		);
 
+		// Click on the actual span element (not the wrapper)
 		const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
 		const spanElement = spanOverview.querySelector(
 			SPAN_OVERVIEW_CLASS,
@@ -440,6 +438,7 @@ describe('Span Click User Flows', () => {
 		expect(mockUrlQuery.get('anotherParam')).toBe('anotherValue');
 		expect(mockUrlQuery.get('spanId')).toBe('span-1');
 
+		// Verify navigation was called with all parameters
 		expect(mockSafeNavigate).toHaveBeenCalledWith({
 			search: expect.stringMatching(
 				/existingParam=existingValue.*anotherParam=anotherValue.*spanId=span-1/,

frontend/src/pages/TraceDetailsV3/components/FieldsSettings/AddedFields.tsx

@@ -15,13 +15,10 @@ import {
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Button } from '@signozhq/ui/button';
-import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { GripVertical } from '@signozhq/icons';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
-import styles from './FieldsSettings.module.scss';
-
 function SortableField({
 	field,
 	onRemove,
@@ -43,17 +40,14 @@ function SortableField({
 		<div
 			ref={setNodeRef}
 			style={style}
-			className={cx(
-				styles.fieldItem,
-				allowDrag ? styles.isDragEnabled : styles.isDragDisabled,
-			)}
+			className={`fs-field-item ${allowDrag ? 'drag-enabled' : 'drag-disabled'}`}
 		>
-			<div {...attributes} {...listeners} className={styles.dragHandle}>
+			<div {...attributes} {...listeners} className="drag-handle">
 				{allowDrag && <GripVertical size={14} />}
-				<span className={styles.fieldKey}>{field.key}</span>
+				<span className="fs-field-key">{field.key}</span>
 			</div>
 			<Button
-				className={cx(styles.removeBtn, 'periscope-btn')}
+				className="remove-field-btn periscope-btn"
 				variant="outlined"
 				color="destructive"
 				size="sm"
@@ -100,9 +94,9 @@ function AddedFields({
 	const allowDrag = inputValue.length === 0;
 
 	return (
-		<div className={cx(styles.section, styles.sectionAdded)}>
-			<div className={styles.sectionHeader}>ADDED FIELDS</div>
-			<div className={styles.addedList}>
+		<div className="fs-section fs-added">
+			<div className="fs-section-header">ADDED FIELDS</div>
+			<div className="fs-added-list">
 				<OverlayScrollbar>
 					<DndContext
 						sensors={sensors}
@@ -110,7 +104,7 @@ function AddedFields({
 						onDragEnd={handleDragEnd}
 					>
 						{filteredFields.length === 0 ? (
-							<div className={styles.noValues}>No values found</div>
+							<div className="fs-no-values">No values found</div>
 						) : (
 							<SortableContext
 								items={fields.map((f) => f.key)}

frontend/src/pages/TraceDetailsV3/components/FieldsSettings/FieldsSettings.module.scss

@@ -1,161 +0,0 @@
-.root {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	background: var(--l1-background);
-	color: var(--l1-foreground);
-	overflow: hidden;
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 10px 12px;
-	border-bottom: 1px solid var(--l1-border);
-}
-
-.title {
-	display: flex;
-	align-items: center;
-	gap: 10px;
-	font-size: 13px;
-	font-weight: 500;
-}
-
-.closeIcon {
-	cursor: pointer;
-	color: var(--l2-foreground);
-
-	&:hover {
-		color: var(--l1-foreground);
-	}
-}
-
-.searchInput {
-	background-color: var(--l1-background);
-	height: 40px;
-	border-radius: 0;
-	border-left: none;
-	border-right: none;
-}
-
-.section {
-	display: flex;
-	flex-direction: column;
-}
-
-.sectionAdded {
-	max-height: 40%;
-	border-bottom: 1px solid var(--l1-border);
-}
-
-.sectionOther {
-	flex: 1;
-	min-height: 0;
-}
-
-.sectionHeader {
-	color: var(--muted-foreground);
-	font-size: 11px;
-	font-weight: 500;
-	line-height: 18px;
-	letter-spacing: 0.88px;
-	text-transform: uppercase;
-	padding: 8px 12px;
-}
-
-.addedList {
-	overflow: hidden;
-}
-
-.otherList {
-	flex: 1;
-	min-height: 0;
-	overflow: hidden;
-
-	// Ant Skeleton.Input rendered inside the loading state — override its
-	// hard-coded width.
-	:global(.ant-skeleton-input) {
-		width: 300px;
-		margin: 8px 12px;
-	}
-}
-
-.noValues {
-	padding: 8px;
-	text-align: center;
-	color: var(--l2-foreground);
-	font-size: 12px;
-}
-
-.limitHint {
-	padding: 8px 12px;
-	text-align: center;
-	color: var(--muted-foreground);
-	font-size: 11px;
-}
-
-.fieldItem {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 6px 12px;
-	border-radius: 4px;
-	user-select: none;
-	font-size: 13px;
-
-	&:hover {
-		background-color: var(--l2-background);
-
-		.removeBtn,
-		.addBtn {
-			opacity: 1;
-		}
-	}
-}
-
-.dragHandle {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	flex-grow: 1;
-}
-
-.fieldKey {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.isDragEnabled {
-	cursor: grab;
-
-	&:active {
-		cursor: grabbing;
-	}
-}
-
-.isDragDisabled {
-	padding: 6px 12px;
-}
-
-.otherFieldItem {
-	height: 32px;
-}
-
-.removeBtn,
-.addBtn {
-	padding: 4px 10px;
-	opacity: 0;
-	transition: opacity 0.15s ease-in-out;
-	flex-shrink: 0;
-}
-
-.footer {
-	display: flex;
-	gap: 12px;
-	padding: 12px;
-	border-top: 1px solid var(--l1-border);
-	justify-content: space-between;
-}

frontend/src/pages/TraceDetailsV3/components/FieldsSettings/FieldsSettings.styles.scss

@@ -0,0 +1,161 @@
+.fields-settings {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	background: var(--l1-background);
+	color: var(--l1-foreground);
+	overflow: hidden;
+
+	.fs-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 10px 12px;
+		border-bottom: 1px solid var(--l1-border);
+
+		.fs-title {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+			font-size: 13px;
+			font-weight: 500;
+		}
+
+		.fs-close-icon {
+			cursor: pointer;
+			color: var(--l2-foreground);
+
+			&:hover {
+				color: var(--l1-foreground);
+			}
+		}
+	}
+
+	.fs-search {
+		.fs-search-input {
+			background-color: var(--l1-background);
+			height: 40px;
+			border-radius: 0;
+			border-left: none;
+			border-right: none;
+		}
+	}
+
+	.fs-section {
+		display: flex;
+		flex-direction: column;
+
+		&.fs-added {
+			max-height: 40%;
+			border-bottom: 1px solid var(--l1-border);
+		}
+
+		&.fs-other {
+			flex: 1;
+			min-height: 0;
+		}
+	}
+
+	.fs-section-header {
+		color: var(--muted-foreground);
+		font-size: 11px;
+		font-weight: 500;
+		line-height: 18px;
+		letter-spacing: 0.88px;
+		text-transform: uppercase;
+		padding: 8px 12px;
+	}
+
+	.fs-added-list {
+		overflow: hidden;
+	}
+
+	.fs-other-list {
+		flex: 1;
+		min-height: 0;
+		overflow: hidden;
+
+		.ant-skeleton-input {
+			width: 300px;
+			margin: 8px 12px;
+		}
+	}
+
+	.fs-no-values {
+		padding: 8px;
+		text-align: center;
+		color: var(--l2-foreground);
+		font-size: 12px;
+	}
+
+	.fs-limit-hint {
+		padding: 8px 12px;
+		text-align: center;
+		color: var(--muted-foreground);
+		font-size: 11px;
+	}
+}
+
+.fs-field-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 6px 12px;
+	border-radius: 4px;
+	user-select: none;
+	font-size: 13px;
+
+	.drag-handle {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		flex-grow: 1;
+	}
+
+	.fs-field-key {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&.drag-enabled {
+		cursor: grab;
+
+		&:active {
+			cursor: grabbing;
+		}
+	}
+
+	&.drag-disabled {
+		padding: 6px 12px;
+	}
+
+	&.other-field-item {
+		height: 32px;
+	}
+
+	.remove-field-btn,
+	.add-field-btn {
+		padding: 4px 10px;
+		opacity: 0;
+		transition: opacity 0.15s ease-in-out;
+		flex-shrink: 0;
+	}
+
+	&:hover {
+		background-color: var(--l2-background);
+
+		.remove-field-btn,
+		.add-field-btn {
+			opacity: 1;
+		}
+	}
+}
+
+.fs-footer {
+	display: flex;
+	gap: 12px;
+	padding: 12px;
+	border-top: 1px solid var(--l1-border);
+	justify-content: space-between;
+}

frontend/src/pages/TraceDetailsV3/components/FieldsSettings/FieldsSettings.tsx

@@ -10,7 +10,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import AddedFields from './AddedFields';
 import OtherFields from './OtherFields';
 
-import styles from './FieldsSettings.module.scss';
+import './FieldsSettings.styles.scss';
 
 const MAX_FIELDS_DEFAULT = 10;
 
@@ -89,18 +89,18 @@ function FieldsSettings({
 	const isAtLimit = draftFields.length >= maxFields;
 
 	return (
-		<div className={styles.root}>
-			<div className={styles.header}>
-				<div className={styles.title}>
+		<div className="fields-settings">
+			<div className="fs-header">
+				<div className="fs-title">
 					<TableColumnsSplit size={16} />
 					{title}
 				</div>
-				<X className={styles.closeIcon} size={16} onClick={onClose} />
+				<X className="fs-close-icon" size={16} onClick={onClose} />
 			</div>
 
-			<section>
+			<section className="fs-search">
 				<Input
-					className={styles.searchInput}
+					className="fs-search-input"
 					type="text"
 					value={inputValue}
 					placeholder="Search for a field..."
@@ -123,7 +123,7 @@ function FieldsSettings({
 			/>
 
 			{hasUnsavedChanges && (
-				<div className={styles.footer}>
+				<div className="fs-footer">
 					<Button
 						variant="outlined"
 						color="secondary"

frontend/src/pages/TraceDetailsV3/components/FieldsSettings/OtherFields.tsx

@@ -1,15 +1,12 @@
 import { useMemo } from 'react';
 import { Button } from '@signozhq/ui/button';
 import { Skeleton } from 'antd';
-import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
 
-import styles from './FieldsSettings.module.scss';
-
 interface OtherFieldsProps {
 	dataSource: DataSource;
 	debouncedInputValue: string;
@@ -53,9 +50,9 @@ function OtherFields({
 
 	if (isFetching) {
 		return (
-			<div className={cx(styles.section, styles.sectionOther)}>
-				<div className={styles.sectionHeader}>OTHER FIELDS</div>
-				<div className={styles.otherList}>
+			<div className="fs-section fs-other">
+				<div className="fs-section-header">OTHER FIELDS</div>
+				<div className="fs-other-list">
 					{Array.from({ length: 5 }).map((_, i) => (
 						// eslint-disable-next-line react/no-array-index-key
 						<Skeleton.Input active size="small" key={i} />
@@ -66,23 +63,20 @@ function OtherFields({
 	}
 
 	return (
-		<div className={cx(styles.section, styles.sectionOther)}>
-			<div className={styles.sectionHeader}>OTHER FIELDS</div>
-			<div className={styles.otherList}>
+		<div className="fs-section fs-other">
+			<div className="fs-section-header">OTHER FIELDS</div>
+			<div className="fs-other-list">
 				<OverlayScrollbar>
 					<>
 						{otherFields.length === 0 ? (
-							<div className={styles.noValues}>No values found</div>
+							<div className="fs-no-values">No values found</div>
 						) : (
 							otherFields.map((attr) => (
-								<div
-									key={attr.key}
-									className={cx(styles.fieldItem, styles.otherFieldItem)}
-								>
-									<span className={styles.fieldKey}>{attr.key}</span>
+								<div key={attr.key} className="fs-field-item other-field-item">
+									<span className="fs-field-key">{attr.key}</span>
 									{!isAtLimit && (
 										<Button
-											className={cx(styles.addBtn, 'periscope-btn')}
+											className="add-field-btn periscope-btn"
 											variant="outlined"
 											color="secondary"
 											size="sm"
@@ -94,7 +88,7 @@ function OtherFields({
 								</div>
 							))
 						)}
-						{isAtLimit && <div className={styles.limitHint}>Maximum 10 fields</div>}
+						{isAtLimit && <div className="fs-limit-hint">Maximum 10 fields</div>}
 					</>
 				</OverlayScrollbar>
 			</div>

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -32,9 +32,7 @@ import TraceWaterfall from './TraceWaterfall/TraceWaterfall';
 import { IInterestedSpan } from './TraceWaterfall/types';
 import { getAncestorSpanIds } from './TraceWaterfall/utils';
 
-import cx from 'classnames';
-
-import styles from './TraceDetailsV3.module.scss';
+import './TraceDetailsV3.styles.scss';
 
 function TraceDetailsV3(): JSX.Element {
 	const { id: traceId } = useParams<TraceDetailV3URLProps>();
@@ -287,7 +285,7 @@ function TraceDetailsV3(): JSX.Element {
 
 	return (
 		<TraceStoreSync aggregations={traceData?.payload?.aggregations}>
-			<div className={styles.root}>
+			<div className="trace-details-v3">
 				<TraceDetailsHeader
 					filterMetadata={filterMetadata}
 					onFilteredSpansChange={handleFilteredSpansChange}
@@ -299,20 +297,20 @@ function TraceDetailsV3(): JSX.Element {
 					<NoData />
 				) : (
 					<>
-						<div className={styles.content}>
+						<div className="trace-details-v3__content">
 							<Collapse
 								// @ts-expect-error motion is passed through to rc-collapse to disable animation
 								motion={false}
 								activeKey={activeKeys.filter((k) => k === 'flame')}
 								onChange={(): void => handleCollapseChange('flame')}
 								size="small"
-								className={styles.flameCollapse}
+								className="trace-details-v3__flame-collapse"
 								items={[
 									{
 										key: 'flame',
 										label: (
-											<div className={styles.collapseLabel}>
-												<span className={styles.collapseTitle}>
+											<div className="trace-details-v3__collapse-label">
+												<span className="trace-details-v3__collapse-title">
 													Flame Graph
 													{traceData?.payload?.totalSpansCount &&
 														traceData.payload.totalSpansCount > FLAMEGRAPH_SPAN_LIMIT && (
@@ -323,15 +321,17 @@ function TraceDetailsV3(): JSX.Element {
 														)}
 												</span>
 												{traceData?.payload?.totalSpansCount ? (
-													<span className={styles.collapseCount}>
-														<span className={styles.collapseCountItem}>
+													<span className="trace-details-v3__collapse-count">
+														<span className="trace-details-v3__collapse-count-item">
 															<ChartNoAxesGantt size={13} />
 															Spans: {traceData.payload.totalSpansCount}
 														</span>
 														<span
-															className={cx(styles.collapseCountItem, {
-																[styles.hasErrors]: traceData.payload.totalErrorSpansCount > 0,
-															})}
+															className={`trace-details-v3__collapse-count-item${
+																traceData.payload.totalErrorSpansCount > 0
+																	? ' trace-details-v3__collapse-count-errors'
+																	: ''
+															}`}
 														>
 															<TriangleAlert size={13} />
 															Errors: {traceData.payload.totalErrorSpansCount ?? 0}
@@ -360,9 +360,11 @@ function TraceDetailsV3(): JSX.Element {
 								activeKey={activeKeys.filter((k) => k === 'waterfall')}
 								onChange={(): void => handleCollapseChange('waterfall')}
 								size="small"
-								className={cx(styles.waterfallCollapse, {
-									[styles.isDocked]: isWaterfallDocked,
-								})}
+								className={`trace-details-v3__waterfall-collapse${
+									isWaterfallDocked
+										? ' trace-details-v3__waterfall-collapse--docked'
+										: ''
+								}`}
 								items={[
 									{
 										key: 'waterfall',
@@ -373,7 +375,7 @@ function TraceDetailsV3(): JSX.Element {
 							/>
 
 							{panelState.isOpen && isDocked && (
-								<div className={styles.dockedSpanDetails}>
+								<div className="trace-details-v3__docked-span-details">
 									<SpanDetailsPanel
 										panelState={panelState}
 										selectedSpan={selectedSpan}

tests/fixtures/querier.py

@@ -69,7 +69,7 @@ class BuilderQuery:
 class TraceOperatorQuery:
     name: str
     expression: str
-    return_spans_from: str
+    return_spans_from: str | None = None
     limit: int | None = None
     order: list[OrderBy] | None = None
 
@@ -77,8 +77,9 @@ class TraceOperatorQuery:
         spec: dict[str, Any] = {
             "name": self.name,
             "expression": self.expression,
-            "returnSpansFrom": self.return_spans_from,
         }
+        if self.return_spans_from is not None:
+            spec["returnSpansFrom"] = self.return_spans_from
         if self.limit is not None:
             spec["limit"] = self.limit
         if self.order:

tests/integration/tests/rawexportdata/02_traces.py

@@ -625,7 +625,6 @@ def test_export_traces_with_composite_query_trace_operator(
     query_c = TraceOperatorQuery(
         name="C",
         expression="A => B",
-        return_spans_from="A",
         limit=1000,
         order=[OrderBy(TelemetryFieldKey("timestamp", "string", "span"), "desc")],
     )
@@ -652,17 +651,15 @@ def test_export_traces_with_composite_query_trace_operator(
 
     # Parse JSONL content
     jsonl_lines = response.text.strip().split("\n")
-    assert len(jsonl_lines) == 1, f"Expected at least 1 line, got {len(jsonl_lines)}"
+    assert len(jsonl_lines) >= 1, f"Expected at least 1 line, got {len(jsonl_lines)}"
 
-    # Verify all returned spans belong to the matched trace
+    # Verify all returned spans belong to the matched trace.
+    # The direct-descendant JOIN emits one row per matching child, so the parent
+    # span may appear more than once (once per child that satisfies the condition).
     json_objects = [json.loads(line) for line in jsonl_lines]
     trace_ids = [obj.get("trace_id") for obj in json_objects]
     assert all(tid == parent_trace_id for tid in trace_ids)
 
-    # Verify the parent span (returnSpansFrom = "A") is present
-    span_names = [obj.get("name") for obj in json_objects]
-    assert "parent-operation" in span_names
-
 
 def test_export_traces_with_select_fields(
     signoz: types.SigNoz,