fix: highlighting first series

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -33,6 +33,7 @@ export default function ChartWrapper({
 	children,
 	layoutChildren,
 	yAxisUnit,
+	groupBy,
 	customTooltip,
 	pinnedTooltipElement,
 	'data-testid': testId,
@@ -68,8 +69,9 @@ export default function ChartWrapper({
 	const syncMetadata = useMemo(
 		() => ({
 			yAxisUnit,
+			groupBy,
 		}),
-		[yAxisUnit],
+		[yAxisUnit, groupBy],
 	);
 
 	return (

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -6,6 +6,7 @@ import {
 	DashboardCursorSync,
 	TooltipClickData,
 } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 interface BaseChartProps {
 	width: number;
@@ -38,6 +39,7 @@ interface UPlotBasedChartProps {
 interface UPlotChartDataProps {
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
+	groupBy?: BaseAutocompleteData[];
 }
 
 export interface TimeSeriesChartProps

frontend/src/container/DashboardContainer/visualization/hooks/usePanelContextMenu.ts

@@ -104,12 +104,7 @@ export const usePanelContextMenu = ({
 			}
 
 			if (data && data?.record?.queryName) {
-				onClick(data.coord, {
-					...data.record,
-					label: data.label,
-					seriesColor: data.seriesColor,
-					timeRange,
-				});
+				onClick(data.coord, { ...data.record, label: data.label, timeRange });
 			}
 		},
 		[onClick, queryResponse],

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -113,6 +113,10 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		uPlotRef.current = plot;
 	}, []);
 
+	const groupBy = useMemo(() => {
+		return widget.query.builder.queryData[0].groupBy;
+	}, [widget.query]);
+
 	return (
 		<div className="panel-container" ref={graphRef}>
 			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
@@ -128,6 +132,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					width={containerDimensions.width}
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}
+					groupBy={groupBy}
 					isStackedBarChart={widget.stackedBarChart ?? false}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts

@@ -105,6 +105,7 @@ export function prepareBarPanelConfig({
 			colorMapping: widget.customLegendColors ?? {},
 			isDarkMode,
 			stepInterval: currentStepInterval,
+			metric: series.metric,
 		});
 	});
 

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx

@@ -104,6 +104,10 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 		widget.decimalPrecision,
 	]);
 
+	const groupBy = useMemo(() => {
+		return widget.query.builder.queryData[0].groupBy;
+	}, [widget.query]);
+
 	return (
 		<div className="panel-container" ref={graphRef}>
 			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
@@ -117,6 +121,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
 					data={chartData as uPlot.AlignedData}
+					groupBy={groupBy}
 					width={containerDimensions.width}
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts

@@ -131,6 +131,7 @@ export const prepareUPlotConfig = ({
 			pointSize: 5,
 			fillMode: widget.fillMode || FillMode.None,
 			isDarkMode,
+			metric: series.metric,
 		});
 	});
 

frontend/src/container/QueryTable/Drilldown/__tests__/useBaseDrilldownNavigate.test.ts

@@ -1,282 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import ROUTES from 'constants/routes';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import { getViewQuery } from '../drilldownUtils';
-import { AggregateData } from '../useAggregateDrilldown';
-import useBaseDrilldownNavigate, {
-	buildDrilldownUrl,
-	getRoute,
-} from '../useBaseDrilldownNavigate';
-
-const mockSafeNavigate = jest.fn();
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: typeof mockSafeNavigate } => ({ safeNavigate: mockSafeNavigate }),
-}));
-
-jest.mock('../drilldownUtils', () => ({
-	...jest.requireActual('../drilldownUtils'),
-	getViewQuery: jest.fn(),
-}));
-
-const mockGetViewQuery = getViewQuery as jest.Mock;
-
-// ─── Fixtures ────────────────────────────────────────────────────────────────
-
-const MOCK_QUERY: Query = {
-	id: 'q1',
-	queryType: 'builder' as any,
-	builder: {
-		queryData: [
-			{
-				queryName: 'A',
-				dataSource: 'metrics' as any,
-				groupBy: [],
-				expression: '',
-				disabled: false,
-				functions: [],
-				legend: '',
-				having: [],
-				limit: null,
-				stepInterval: undefined,
-				orderBy: [],
-			},
-		],
-		queryFormulas: [],
-		queryTraceOperator: [],
-	},
-	promql: [],
-	clickhouse_sql: [],
-};
-
-const MOCK_VIEW_QUERY: Query = {
-	...MOCK_QUERY,
-	builder: {
-		...MOCK_QUERY.builder,
-		queryData: [
-			{
-				...MOCK_QUERY.builder.queryData[0],
-				filters: { items: [], op: 'AND' },
-			},
-		],
-	},
-};
-
-const MOCK_AGGREGATE_DATA: AggregateData = {
-	queryName: 'A',
-	filters: [{ filterKey: 'service_name', filterValue: 'auth', operator: '=' }],
-	timeRange: { startTime: 1000000, endTime: 2000000 },
-};
-
-// ─── getRoute ─────────────────────────────────────────────────────────────────
-
-describe('getRoute', () => {
-	it.each([
-		['view_logs', ROUTES.LOGS_EXPLORER],
-		['view_metrics', ROUTES.METRICS_EXPLORER],
-		['view_traces', ROUTES.TRACES_EXPLORER],
-	])('maps %s to the correct explorer route', (key, expected) => {
-		expect(getRoute(key)).toBe(expected);
-	});
-
-	it('returns empty string for an unknown key', () => {
-		expect(getRoute('view_dashboard')).toBe('');
-	});
-});
-
-// ─── buildDrilldownUrl ────────────────────────────────────────────────────────
-
-describe('buildDrilldownUrl', () => {
-	beforeEach(() => {
-		mockGetViewQuery.mockReturnValue(MOCK_VIEW_QUERY);
-	});
-
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('returns null for an unknown drilldown key', () => {
-		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_dashboard');
-		expect(url).toBeNull();
-	});
-
-	it('returns null when getViewQuery returns null', () => {
-		mockGetViewQuery.mockReturnValue(null);
-		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
-		expect(url).toBeNull();
-	});
-
-	it('returns a URL starting with the logs explorer route for view_logs', () => {
-		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
-		expect(url).not.toBeNull();
-		expect(url).toContain(ROUTES.LOGS_EXPLORER);
-	});
-
-	it('returns a URL starting with the traces explorer route for view_traces', () => {
-		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_traces');
-		expect(url).toContain(ROUTES.TRACES_EXPLORER);
-	});
-
-	it('includes compositeQuery param in the URL', () => {
-		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
-		expect(url).toContain('compositeQuery=');
-	});
-
-	it('includes startTime and endTime when aggregateData has a timeRange', () => {
-		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
-		expect(url).toContain('startTime=1000000');
-		expect(url).toContain('endTime=2000000');
-	});
-
-	it('omits startTime and endTime when aggregateData has no timeRange', () => {
-		const { timeRange: _, ...withoutTimeRange } = MOCK_AGGREGATE_DATA;
-		const url = buildDrilldownUrl(MOCK_QUERY, withoutTimeRange, 'view_logs');
-		expect(url).not.toContain('startTime=');
-		expect(url).not.toContain('endTime=');
-	});
-
-	it('includes summaryFilters param for view_metrics', () => {
-		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_metrics');
-		expect(url).toContain(ROUTES.METRICS_EXPLORER);
-		expect(url).toContain('summaryFilters=');
-	});
-
-	it('does not include summaryFilters param for non-metrics routes', () => {
-		const url = buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
-		expect(url).not.toContain('summaryFilters=');
-	});
-
-	it('handles null aggregateData by passing empty filters and empty queryName', () => {
-		const url = buildDrilldownUrl(MOCK_QUERY, null, 'view_logs');
-		expect(url).not.toBeNull();
-		expect(mockGetViewQuery).toHaveBeenCalledWith(MOCK_QUERY, [], 'view_logs', '');
-	});
-
-	it('passes aggregateData filters and queryName to getViewQuery', () => {
-		buildDrilldownUrl(MOCK_QUERY, MOCK_AGGREGATE_DATA, 'view_logs');
-		expect(mockGetViewQuery).toHaveBeenCalledWith(
-			MOCK_QUERY,
-			MOCK_AGGREGATE_DATA.filters,
-			'view_logs',
-			MOCK_AGGREGATE_DATA.queryName,
-		);
-	});
-});
-
-// ─── useBaseDrilldownNavigate ─────────────────────────────────────────────────
-
-describe('useBaseDrilldownNavigate', () => {
-	beforeEach(() => {
-		mockGetViewQuery.mockReturnValue(MOCK_VIEW_QUERY);
-	});
-
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('calls safeNavigate with the built URL on a valid key', () => {
-		const { result } = renderHook(() =>
-			useBaseDrilldownNavigate({
-				resolvedQuery: MOCK_QUERY,
-				aggregateData: MOCK_AGGREGATE_DATA,
-			}),
-		);
-
-		result.current('view_logs');
-
-		expect(mockSafeNavigate).toHaveBeenCalledTimes(1);
-		const [url] = mockSafeNavigate.mock.calls[0];
-		expect(url).toContain(ROUTES.LOGS_EXPLORER);
-		expect(url).toContain('compositeQuery=');
-	});
-
-	it('opens the explorer in a new tab', () => {
-		const { result } = renderHook(() =>
-			useBaseDrilldownNavigate({
-				resolvedQuery: MOCK_QUERY,
-				aggregateData: MOCK_AGGREGATE_DATA,
-			}),
-		);
-
-		result.current('view_traces');
-
-		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			expect.any(String),
-			{ newTab: true },
-		);
-	});
-
-	it('calls callback after successful navigation', () => {
-		const callback = jest.fn();
-		const { result } = renderHook(() =>
-			useBaseDrilldownNavigate({
-				resolvedQuery: MOCK_QUERY,
-				aggregateData: MOCK_AGGREGATE_DATA,
-				callback,
-			}),
-		);
-
-		result.current('view_logs');
-
-		expect(callback).toHaveBeenCalledTimes(1);
-	});
-
-	it('does not call safeNavigate for an unknown key', () => {
-		const { result } = renderHook(() =>
-			useBaseDrilldownNavigate({
-				resolvedQuery: MOCK_QUERY,
-				aggregateData: MOCK_AGGREGATE_DATA,
-			}),
-		);
-
-		result.current('view_dashboard');
-
-		expect(mockSafeNavigate).not.toHaveBeenCalled();
-	});
-
-	it('still calls callback when the key is unknown', () => {
-		const callback = jest.fn();
-		const { result } = renderHook(() =>
-			useBaseDrilldownNavigate({
-				resolvedQuery: MOCK_QUERY,
-				aggregateData: MOCK_AGGREGATE_DATA,
-				callback,
-			}),
-		);
-
-		result.current('view_dashboard');
-
-		expect(callback).toHaveBeenCalledTimes(1);
-		expect(mockSafeNavigate).not.toHaveBeenCalled();
-	});
-
-	it('still calls callback when getViewQuery returns null', () => {
-		mockGetViewQuery.mockReturnValue(null);
-		const callback = jest.fn();
-		const { result } = renderHook(() =>
-			useBaseDrilldownNavigate({
-				resolvedQuery: MOCK_QUERY,
-				aggregateData: MOCK_AGGREGATE_DATA,
-				callback,
-			}),
-		);
-
-		result.current('view_logs');
-
-		expect(callback).toHaveBeenCalledTimes(1);
-		expect(mockSafeNavigate).not.toHaveBeenCalled();
-	});
-
-	it('handles null aggregateData without throwing', () => {
-		const { result } = renderHook(() =>
-			useBaseDrilldownNavigate({
-				resolvedQuery: MOCK_QUERY,
-				aggregateData: null,
-			}),
-		);
-
-		expect(() => result.current('view_logs')).not.toThrow();
-		expect(mockSafeNavigate).toHaveBeenCalledTimes(1);
-	});
-});

frontend/src/container/QueryTable/Drilldown/drilldownUtils.tsx

@@ -166,7 +166,7 @@ export const getAggregateColumnHeader = (
 	};
 };
 
-export const getFiltersFromMetric = (metric: any): FilterData[] =>
+const getFiltersFromMetric = (metric: any): FilterData[] =>
 	Object.keys(metric).map((key) => ({
 		filterKey: key,
 		filterValue: metric[key],
@@ -196,7 +196,6 @@ export const getUplotClickData = ({
 	coord: { x: number; y: number };
 	record: { queryName: string; filters: FilterData[] };
 	label: string | React.ReactNode;
-	seriesColor?: string;
 } | null => {
 	if (!queryData?.queryName || !metric) {
 		return null;
@@ -209,7 +208,6 @@ export const getUplotClickData = ({
 
 	// Generate label from focusedSeries data
 	let label: string | React.ReactNode = '';
-	const seriesColor = focusedSeries?.color;
 	if (focusedSeries && focusedSeries.seriesName) {
 		label = (
 			<span style={{ color: focusedSeries.color }}>
@@ -225,7 +223,6 @@ export const getUplotClickData = ({
 		},
 		record,
 		label,
-		seriesColor,
 	};
 };
 
@@ -240,7 +237,6 @@ export const getPieChartClickData = (
 	queryName: string;
 	filters: FilterData[];
 	label: string | React.ReactNode;
-	seriesColor?: string;
 } | null => {
 	const { metric, queryName } = arc.data.record;
 	if (!queryName || !metric) {
@@ -252,7 +248,6 @@ export const getPieChartClickData = (
 		queryName,
 		filters: getFiltersFromMetric(metric), // TODO: add where clause query as well.
 		label,
-		seriesColor: arc.data.color,
 	};
 };
 

frontend/src/container/QueryTable/Drilldown/useAggregateDrilldown.tsx

@@ -22,7 +22,6 @@ export interface AggregateData {
 		endTime: number;
 	};
 	label?: string | React.ReactNode;
-	seriesColor?: string;
 }
 
 const useAggregateDrilldown = ({

frontend/src/container/QueryTable/Drilldown/useBaseAggregateOptions.tsx

@@ -2,10 +2,14 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { LinkOutlined, LoadingOutlined } from '@ant-design/icons';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
 import useUpdatedQuery from 'container/GridCardLayout/useResolveQuery';
 import { processContextLinks } from 'container/NewWidget/RightContainer/ContextLinks/utils';
 import useContextVariables from 'hooks/dashboard/useContextVariables';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import createQueryParams from 'lib/createQueryParams';
 import ContextMenu from 'periscope/components/ContextMenu';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { ContextLinksData } from 'types/api/dashboard/getAll';
@@ -14,10 +18,9 @@ import { openInNewTab } from 'utils/navigation';
 
 import { ContextMenuItem } from './contextConfig';
 import { getDataLinks } from './dataLinksUtils';
-import { getAggregateColumnHeader } from './drilldownUtils';
+import { getAggregateColumnHeader, getViewQuery } from './drilldownUtils';
 import { getBaseContextConfig } from './menuOptions';
 import { AggregateData } from './useAggregateDrilldown';
-import useBaseDrilldownNavigate from './useBaseDrilldownNavigate';
 
 interface UseBaseAggregateOptionsProps {
 	query: Query;
@@ -35,6 +38,19 @@ interface BaseAggregateOptionsConfig {
 	items?: ContextMenuItem;
 }
 
+const getRoute = (key: string): string => {
+	switch (key) {
+		case 'view_logs':
+			return ROUTES.LOGS_EXPLORER;
+		case 'view_metrics':
+			return ROUTES.METRICS_EXPLORER;
+		case 'view_traces':
+			return ROUTES.TRACES_EXPLORER;
+		default:
+			return '';
+	}
+};
+
 const useBaseAggregateOptions = ({
 	query,
 	onClose,
@@ -47,8 +63,10 @@ const useBaseAggregateOptions = ({
 	baseAggregateOptionsConfig: BaseAggregateOptionsConfig;
 } => {
 	const [resolvedQuery, setResolvedQuery] = useState<Query>(query);
-	const { getUpdatedQuery, isLoading: isResolveQueryLoading } =
-		useUpdatedQuery();
+	const {
+		getUpdatedQuery,
+		isLoading: isResolveQueryLoading,
+	} = useUpdatedQuery();
 	const { dashboardData } = useDashboardStore();
 
 	useEffect(() => {
@@ -70,6 +88,8 @@ const useBaseAggregateOptions = ({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [query, aggregateData, panelType]);
 
+	const { safeNavigate } = useSafeNavigate();
+
 	// Use the new useContextVariables hook
 	const { processedVariables } = useContextVariables({
 		maxValues: 2,
@@ -103,16 +123,50 @@ const useBaseAggregateOptions = ({
 					{label}
 				</ContextMenu.Item>
 			));
-		} catch {
+		} catch (error) {
 			return [];
 		}
 	}, [contextLinks, processedVariables, onClose, aggregateData, query]);
 
-	const handleBaseDrilldown = useBaseDrilldownNavigate({
-		resolvedQuery,
-		aggregateData,
-		callback: onClose,
-	});
+	const handleBaseDrilldown = useCallback(
+		(key: string): void => {
+			const route = getRoute(key);
+			const timeRange = aggregateData?.timeRange;
+			const filtersToAdd = aggregateData?.filters || [];
+			const viewQuery = getViewQuery(
+				resolvedQuery,
+				filtersToAdd,
+				key,
+				aggregateData?.queryName || '',
+			);
+
+			let queryParams = {
+				[QueryParams.compositeQuery]: encodeURIComponent(JSON.stringify(viewQuery)),
+				...(timeRange && {
+					[QueryParams.startTime]: timeRange?.startTime.toString(),
+					[QueryParams.endTime]: timeRange?.endTime.toString(),
+				}),
+			} as Record<string, string>;
+
+			if (route === ROUTES.METRICS_EXPLORER) {
+				queryParams = {
+					...queryParams,
+					[QueryParams.summaryFilters]: JSON.stringify(
+						viewQuery?.builder.queryData[0].filters,
+					),
+				};
+			}
+
+			if (route) {
+				safeNavigate(`${route}?${createQueryParams(queryParams)}`, {
+					newTab: true,
+				});
+			}
+
+			onClose();
+		},
+		[resolvedQuery, safeNavigate, onClose, aggregateData],
+	);
 
 	const { pathname } = useLocation();
 
@@ -176,15 +230,7 @@ const useBaseAggregateOptions = ({
 									return (
 										<ContextMenu.Item
 											key={key}
-											icon={
-												isLoading ? (
-													<LoadingOutlined spin />
-												) : (
-													<span style={{ color: aggregateData?.seriesColor }}>
-														{icon}
-													</span>
-												)
-											}
+											icon={isLoading ? <LoadingOutlined spin /> : icon}
 											onClick={(): void => onClick()}
 											disabled={isLoading}
 										>

frontend/src/container/QueryTable/Drilldown/useBaseDrilldownNavigate.ts

@@ -1,117 +0,0 @@
-import { useCallback } from 'react';
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import createQueryParams from 'lib/createQueryParams';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import { getViewQuery } from './drilldownUtils';
-import { AggregateData } from './useAggregateDrilldown';
-
-type DrilldownKey = 'view_logs' | 'view_metrics' | 'view_traces';
-
-const DRILLDOWN_ROUTE_MAP: Record<DrilldownKey, string> = {
-	view_logs: ROUTES.LOGS_EXPLORER,
-	view_metrics: ROUTES.METRICS_EXPLORER,
-	view_traces: ROUTES.TRACES_EXPLORER,
-};
-
-const getRoute = (key: string): string =>
-	DRILLDOWN_ROUTE_MAP[key as DrilldownKey] ?? '';
-
-interface UseBaseDrilldownNavigateProps {
-	resolvedQuery: Query;
-	aggregateData: AggregateData | null;
-	callback?: () => void;
-}
-
-const useBaseDrilldownNavigate = ({
-	resolvedQuery,
-	aggregateData,
-	callback,
-}: UseBaseDrilldownNavigateProps): ((key: string) => void) => {
-	const { safeNavigate } = useSafeNavigate();
-
-	return useCallback(
-		(key: string): void => {
-			const route = getRoute(key);
-			const viewQuery = getViewQuery(
-				resolvedQuery,
-				aggregateData?.filters ?? [],
-				key,
-				aggregateData?.queryName ?? '',
-			);
-
-			if (!viewQuery || !route) {
-				callback?.();
-				return;
-			}
-
-			const timeRange = aggregateData?.timeRange;
-			let queryParams: Record<string, string> = {
-				[QueryParams.compositeQuery]: encodeURIComponent(JSON.stringify(viewQuery)),
-				...(timeRange && {
-					[QueryParams.startTime]: timeRange.startTime.toString(),
-					[QueryParams.endTime]: timeRange.endTime.toString(),
-				}),
-			};
-
-			if (route === ROUTES.METRICS_EXPLORER) {
-				queryParams = {
-					...queryParams,
-					[QueryParams.summaryFilters]: JSON.stringify(
-						viewQuery.builder.queryData[0].filters,
-					),
-				};
-			}
-
-			safeNavigate(`${route}?${createQueryParams(queryParams)}`, {
-				newTab: true,
-			});
-
-			callback?.();
-		},
-		[resolvedQuery, safeNavigate, callback, aggregateData],
-	);
-};
-
-export function buildDrilldownUrl(
-	resolvedQuery: Query,
-	aggregateData: AggregateData | null,
-	key: string,
-): string | null {
-	const route = getRoute(key);
-	const viewQuery = getViewQuery(
-		resolvedQuery,
-		aggregateData?.filters ?? [],
-		key,
-		aggregateData?.queryName ?? '',
-	);
-
-	if (!viewQuery || !route) {
-		return null;
-	}
-
-	const timeRange = aggregateData?.timeRange;
-	let queryParams: Record<string, string> = {
-		[QueryParams.compositeQuery]: encodeURIComponent(JSON.stringify(viewQuery)),
-		...(timeRange && {
-			[QueryParams.startTime]: timeRange.startTime.toString(),
-			[QueryParams.endTime]: timeRange.endTime.toString(),
-		}),
-	};
-
-	if (route === ROUTES.METRICS_EXPLORER) {
-		queryParams = {
-			...queryParams,
-			[QueryParams.summaryFilters]: JSON.stringify(
-				viewQuery.builder.queryData[0].filters,
-			),
-		};
-	}
-
-	return `${route}?${createQueryParams(queryParams)}`;
-}
-
-export { getRoute };
-export default useBaseDrilldownNavigate;

frontend/src/lib/uPlotV2/components/Tooltip/BarChartTooltip.tsx

@@ -16,6 +16,7 @@ export default function BarChartTooltip(props: BarTooltipProps): JSX.Element {
 				yAxisUnit: props.yAxisUnit ?? '',
 				decimalPrecision: props.decimalPrecision,
 				isStackedBarChart: props.isStackedBarChart,
+				syncedSeriesIndexes: props.syncedSeriesIndexes,
 			}),
 		[
 			props.uPlotInstance,
@@ -24,6 +25,7 @@ export default function BarChartTooltip(props: BarTooltipProps): JSX.Element {
 			props.yAxisUnit,
 			props.decimalPrecision,
 			props.isStackedBarChart,
+			props.syncedSeriesIndexes,
 		],
 	);
 

frontend/src/lib/uPlotV2/components/Tooltip/HistogramTooltip.tsx

@@ -17,6 +17,7 @@ export default function HistogramTooltip(
 				uPlotInstance: props.uPlotInstance,
 				yAxisUnit: props.yAxisUnit ?? '',
 				decimalPrecision: props.decimalPrecision,
+				syncedSeriesIndexes: props.syncedSeriesIndexes,
 			}),
 		[
 			props.uPlotInstance,
@@ -24,6 +25,7 @@ export default function HistogramTooltip(
 			props.dataIndexes,
 			props.yAxisUnit,
 			props.decimalPrecision,
+			props.syncedSeriesIndexes,
 		],
 	);
 

frontend/src/lib/uPlotV2/components/Tooltip/TimeSeriesTooltip.tsx

@@ -17,6 +17,7 @@ export default function TimeSeriesTooltip(
 				uPlotInstance: props.uPlotInstance,
 				yAxisUnit: props.yAxisUnit ?? '',
 				decimalPrecision: props.decimalPrecision,
+				syncedSeriesIndexes: props.syncedSeriesIndexes,
 			}),
 		[
 			props.uPlotInstance,
@@ -24,6 +25,7 @@ export default function TimeSeriesTooltip(
 			props.dataIndexes,
 			props.yAxisUnit,
 			props.decimalPrecision,
+			props.syncedSeriesIndexes,
 		],
 	);
 

frontend/src/lib/uPlotV2/components/Tooltip/utils.ts

@@ -62,6 +62,7 @@ export function buildTooltipContent({
 	yAxisUnit,
 	decimalPrecision,
 	isStackedBarChart,
+	syncedSeriesIndexes,
 }: {
 	data: AlignedData;
 	series: Series[];
@@ -71,18 +72,34 @@ export function buildTooltipContent({
 	yAxisUnit: string;
 	decimalPrecision?: PrecisionOption;
 	isStackedBarChart?: boolean;
+	syncedSeriesIndexes?: number[] | null;
 }): TooltipContentItem[] {
 	const items: TooltipContentItem[] = [];
+	const allowedIndexes =
+		syncedSeriesIndexes != null ? new Set(syncedSeriesIndexes) : null;
 
 	for (let seriesIndex = 1; seriesIndex < series.length; seriesIndex += 1) {
 		const seriesItem = series[seriesIndex];
 		if (!seriesItem?.show) {
 			continue;
 		}
+		if (allowedIndexes != null && !allowedIndexes.has(seriesIndex)) {
+			continue;
+		}
 
 		const dataIndex = dataIndexes[seriesIndex];
-		// Skip series with no data at the current cursor position
+		const isSync = allowedIndexes != null;
+
 		if (dataIndex === null) {
+			if (isSync) {
+				items.push({
+					label: String(seriesItem.label ?? ''),
+					value: 0,
+					tooltipValue: 'No Data',
+					color: resolveSeriesColor(seriesItem.stroke, uPlotInstance, seriesIndex),
+					isActive: false,
+				});
+			}
 			continue;
 		}
 
@@ -102,6 +119,14 @@ export function buildTooltipContent({
 				color: resolveSeriesColor(seriesItem.stroke, uPlotInstance, seriesIndex),
 				isActive: seriesIndex === activeSeriesIndex,
 			});
+		} else if (isSync) {
+			items.push({
+				label: String(seriesItem.label ?? ''),
+				value: 0,
+				tooltipValue: 'No Data',
+				color: resolveSeriesColor(seriesItem.stroke, uPlotInstance, seriesIndex),
+				isActive: false,
+			});
 		}
 	}
 

frontend/src/lib/uPlotV2/components/types.ts

@@ -58,6 +58,9 @@ export interface TooltipRenderArgs {
 	isPinned: boolean;
 	dismiss: () => void;
 	viaSync: boolean;
+	/** In Tooltip sync mode, limits which series are rendered in the receiver tooltip.
+	 * null = no filtering; [] = no matches (tooltip hidden upstream); [...] = allowed indexes */
+	syncedSeriesIndexes?: number[] | null;
 }
 
 export interface BaseTooltipProps {

frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts

@@ -9,6 +9,7 @@ import {
 	BarAlignment,
 	ConfigBuilder,
 	DrawStyle,
+	ExtendedSeries,
 	FillMode,
 	LineInterpolation,
 	LineStyle,
@@ -27,7 +28,10 @@ let builders: PathBuilders | null = null;
 
 const DEFAULT_LINE_WIDTH = 2;
 export const POINT_SIZE_FACTOR = 2.5;
-export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
+export class UPlotSeriesBuilder extends ConfigBuilder<
+	SeriesProps,
+	ExtendedSeries
+> {
 	constructor(props: SeriesProps) {
 		super(props);
 		const pathBuilders = uPlot.paths;
@@ -205,8 +209,8 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 		);
 	}
 
-	getConfig(): Series {
-		const { scaleKey, label, spanGaps, show = true } = this.props;
+	getConfig(): ExtendedSeries {
+		const { scaleKey, label, spanGaps, show = true, metric } = this.props;
 
 		const resolvedLineColor = this.getLineColor();
 
@@ -233,6 +237,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			...lineConfig,
 			...pathConfig,
 			points: Object.keys(pointsConfig).length > 0 ? pointsConfig : undefined,
+			metric,
 		};
 	}
 }

frontend/src/lib/uPlotV2/config/types.ts

@@ -171,6 +171,10 @@ export enum FillMode {
 	None = 'none',
 }
 
+export type ExtendedSeries = Series & {
+	metric?: { [key: string]: string };
+};
+
 export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	scaleKey: string;
 	label?: string;
@@ -194,6 +198,7 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	fillMode?: FillMode;
 	isDarkMode?: boolean;
 	stepInterval?: number;
+	metric?: { [key: string]: string };
 }
 
 export interface LegendItem {

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.tsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 import cx from 'classnames';
 import uPlot from 'uplot';
 
-import { syncCursorRegistry } from './syncCursorRegistry';
+import { createSyncDisplayHook } from './syncDisplayHook';
 import {
 	createInitialControllerState,
 	createSetCursorHandler,
@@ -104,32 +104,16 @@ export default function TooltipPlugin({
 
 		// Enable uPlot's built-in cursor sync when requested so that
 		// crosshair / tooltip can follow the dashboard-wide cursor.
+		let removeSyncDisplayHook: (() => void) | null = null;
 		if (syncMode !== DashboardCursorSync.None && config.scales[0]?.props.time) {
 			config.setCursor({
 				sync: { key: syncKey, scales: ['x', 'y'] },
 			});
 
-			// Show the horizontal crosshair only when the receiving panel shares
-			// the same y-axis unit as the source panel. When this panel is the
-			// source (cursor.event != null) the line is always shown and this
-			// panel's metadata is written to the registry so receivers can read it.
-			config.addHook('setCursor', (u: uPlot): void => {
-				const yCursorEl = u.root.querySelector<HTMLElement>('.u-cursor-y');
-				if (!yCursorEl) {
-					return;
-				}
-
-				if (u.cursor.event != null) {
-					// This panel is the source — publish metadata and always show line.
-					syncCursorRegistry.setMetadata(syncKey, syncMetadata);
-					yCursorEl.style.display = '';
-				} else {
-					// This panel is receiving sync — show only if units match.
-					const sourceMeta = syncCursorRegistry.getMetadata(syncKey);
-					yCursorEl.style.display =
-						sourceMeta?.yAxisUnit === syncMetadata?.yAxisUnit ? '' : 'none';
-				}
-			});
+			removeSyncDisplayHook = config.addHook(
+				'setCursor',
+				createSyncDisplayHook(syncKey, syncMetadata, controller),
+			);
 		}
 
 		// Dismiss the tooltip when the user clicks / presses a key
@@ -137,7 +121,12 @@ export default function TooltipPlugin({
 		const onOutsideInteraction = (event: Event): void => {
 			const target = event.target as Node;
 			if (!containerRef.current?.contains(target)) {
-				dismissTooltip();
+				// Don't dismiss if the click landed inside any other pinned tooltip.
+				const isInsideAnyPinnedTooltip =
+					(target as Element).closest?.('[data-pinned="true"]') != null;
+				if (!isInsideAnyPinnedTooltip) {
+					dismissTooltip();
+				}
 			}
 		};
 
@@ -156,7 +145,7 @@ export default function TooltipPlugin({
 		function updateCursorLock(): void {
 			const plot = getPlot(controller);
 			if (plot) {
-				// @ts-ignore uPlot cursor lock is not working as expected
+				// @ts-expect-error uPlot cursor lock is not working as expected
 				plot.cursor._lock = controller.pinned;
 			}
 		}
@@ -203,6 +192,16 @@ export default function TooltipPlugin({
 			if (!controller.hoverActive || !plot) {
 				return null;
 			}
+			// In Tooltip sync mode, suppress the receiver tooltip entirely when
+			// no receiver series match the source panel's focused series.
+			if (
+				syncTooltipWithDashboard &&
+				controller.cursorDrivenBySync &&
+				Array.isArray(controller.syncedSeriesIndexes) &&
+				controller.syncedSeriesIndexes.length === 0
+			) {
+				return null;
+			}
 			return renderRef.current({
 				uPlotInstance: plot,
 				dataIndexes: controller.seriesIndexes,
@@ -210,6 +209,7 @@ export default function TooltipPlugin({
 				isPinned: controller.pinned,
 				dismiss: dismissTooltip,
 				viaSync: controller.cursorDrivenBySync,
+				syncedSeriesIndexes: controller.syncedSeriesIndexes,
 			});
 		}
 
@@ -431,6 +431,7 @@ export default function TooltipPlugin({
 			removeSetSeriesHook();
 			removeSetLegendHook();
 			removeSetCursorHook();
+			removeSyncDisplayHook?.();
 			if (overClickHandler) {
 				const plot = getPlot(controller);
 				plot?.over.removeEventListener('click', overClickHandler);
@@ -493,7 +494,7 @@ export default function TooltipPlugin({
 		isHovering,
 		contents,
 	]);
-	const isTooltipVisible = isHovering || tooltipBody != null;
+	const isTooltipVisible = tooltipBody != null;
 
 	if (!hasPlot) {
 		return null;

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/syncCursorRegistry.ts

@@ -9,9 +9,13 @@ import type { TooltipSyncMetadata } from './types';
  *
  * Receivers use this to make decisions such as:
  * - Whether to show the horizontal crosshair line (matching yAxisUnit)
- * - Future: what to render inside the tooltip (matching groupBy, etc.)
+ * - Which series to highlight when panels share the same groupBy
  */
 const metadataBySyncKey = new Map<string, TooltipSyncMetadata | undefined>();
+const activeSeriesMetricBySyncKey = new Map<
+	string,
+	Record<string, string> | null
+>();
 
 export const syncCursorRegistry = {
 	setMetadata(syncKey: string, metadata: TooltipSyncMetadata | undefined): void {
@@ -21,4 +25,15 @@ export const syncCursorRegistry = {
 	getMetadata(syncKey: string): TooltipSyncMetadata | undefined {
 		return metadataBySyncKey.get(syncKey);
 	},
+
+	setActiveSeriesMetric(
+		syncKey: string,
+		metric: Record<string, string> | null,
+	): void {
+		activeSeriesMetricBySyncKey.set(syncKey, metric);
+	},
+
+	getActiveSeriesMetric(syncKey: string): Record<string, string> | null {
+		return activeSeriesMetricBySyncKey.get(syncKey) ?? null;
+	},
 };

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/syncDisplayHook.ts

@@ -0,0 +1,175 @@
+import uPlot from 'uplot';
+
+import type { ExtendedSeries } from '../../config/types';
+import { syncCursorRegistry } from './syncCursorRegistry';
+import type { TooltipControllerState, TooltipSyncMetadata } from './types';
+
+/**
+ * Returns the dimension keys present in both groupBy arrays.
+ * An empty result means no overlap — series highlighting should not run.
+ *
+ *   exact    [A, B] vs [A, B]  → [A, B]   one match
+ *   subset   [A]    vs [A, B]  → [A]      multiple receiver series may match
+ *   superset [A, B] vs [A]     → [A]      one receiver series matches
+ *   partial  [A, B] vs [B, C]  → [B]
+ */
+function getCommonGroupByKeys(
+	a: TooltipSyncMetadata['groupBy'],
+	b: TooltipSyncMetadata['groupBy'],
+): string[] {
+	if (!Array.isArray(a) || a.length === 0 || !Array.isArray(b) || b.length === 0) {
+		return [];
+	}
+	const bKeys = new Set(b.map((g) => g.key));
+	return a.filter((g) => bKeys.has(g.key)).map((g) => g.key);
+}
+
+/**
+ * Returns the 1-based indexes of every series whose metric matches
+ * sourceMetric on all commonKeys.
+ */
+function findMatchingSeriesIndexes(
+	series: uPlot.Series[],
+	sourceMetric: Record<string, string>,
+	commonKeys: string[],
+): number[] {
+	return series.reduce<number[]>((acc, s, i) => {
+		if (i === 0) {return acc;}
+		const metric = (s as ExtendedSeries).metric;
+		if (
+			metric != null &&
+			commonKeys.every((key) => metric[key] === sourceMetric[key])
+		) {
+			acc.push(i);
+		}
+		return acc;
+	}, []);
+}
+
+function applySourceSync({
+	uPlotInstance,
+	syncKey,
+	syncMetadata,
+	focusedSeriesIndex,
+}: {
+	uPlotInstance: uPlot;
+	syncKey: string;
+	syncMetadata: TooltipSyncMetadata | undefined;
+	focusedSeriesIndex: number | null;
+}): void {
+	syncCursorRegistry.setMetadata(syncKey, syncMetadata);
+	const focusedSeries =
+		focusedSeriesIndex != null
+			? (uPlotInstance.series[focusedSeriesIndex] as ExtendedSeries)
+			: null;
+	syncCursorRegistry.setActiveSeriesMetric(syncKey, focusedSeries?.metric ?? null);
+}
+
+/**
+ * Returns:
+ *   null      – no groupBy filtering configured or cursor off-chart (no-op for tooltip)
+ *   []        – groupBy configured but no receiver series match the source (hide synced tooltip)
+ *   number[]  – 1-based indexes of matching receiver series (show only these)
+ */
+function applyReceiverSync({
+	uPlotInstance,
+	yCrosshairEl,
+	syncKey,
+	syncMetadata,
+	sourceMetadata,
+	commonKeys,
+}: {
+	uPlotInstance: uPlot;
+	yCrosshairEl: HTMLElement;
+	syncKey: string;
+	syncMetadata: TooltipSyncMetadata | undefined;
+	sourceMetadata: TooltipSyncMetadata | undefined;
+	commonKeys: string[];
+}): number[] | null {
+	yCrosshairEl.style.display =
+		sourceMetadata?.yAxisUnit === syncMetadata?.yAxisUnit ? '' : 'none';
+
+	if (commonKeys.length === 0) {
+		return null;
+	}
+
+	if ((uPlotInstance.cursor.left ?? -1) < 0) {
+		uPlotInstance.setSeries(null, { focus: false });
+		return null;
+	}
+
+	const sourceSeriesMetric = syncCursorRegistry.getActiveSeriesMetric(syncKey);
+	if (sourceSeriesMetric == null) {
+		uPlotInstance.setSeries(null, { focus: false });
+		return [];
+	}
+
+	const matchingIdxs = findMatchingSeriesIndexes(
+		uPlotInstance.series,
+		sourceSeriesMetric,
+		commonKeys,
+	);
+
+	if (matchingIdxs.length === 0) {
+		uPlotInstance.setSeries(null, { focus: false });
+		return [];
+	}
+
+	uPlotInstance.setSeries(matchingIdxs[0], { focus: true });
+
+	return matchingIdxs;
+}
+
+export function createSyncDisplayHook(
+	syncKey: string,
+	syncMetadata: TooltipSyncMetadata | undefined,
+	controller: TooltipControllerState,
+): (u: uPlot) => void {
+	// Cached once — avoids a DOM query on every cursor move.
+	let yCrosshairEl: HTMLElement | null = null;
+
+	// groupBy on both panels is stable (set at config time). Recompute the
+	// intersection only when the source panel's groupBy reference changes.
+	let lastSourceGroupBy: TooltipSyncMetadata['groupBy'];
+	let cachedCommonKeys: string[] = [];
+
+	return (u: uPlot): void => {
+		yCrosshairEl ??= u.root.querySelector<HTMLElement>('.u-cursor-y');
+		if (!yCrosshairEl) {
+			return;
+		}
+
+		if (u.cursor.event != null) {
+			controller.syncedSeriesIndexes = null;
+			applySourceSync({
+				uPlotInstance: u,
+				syncKey,
+				syncMetadata,
+				focusedSeriesIndex: controller.focusedSeriesIndex,
+			});
+			yCrosshairEl.style.display = '';
+			return;
+		}
+
+		// Read metadata once and pass it down — avoids a second registry lookup
+		// inside applyReceiverSync.
+		const sourceMetadata = syncCursorRegistry.getMetadata(syncKey);
+
+		if (sourceMetadata?.groupBy !== lastSourceGroupBy) {
+			lastSourceGroupBy = sourceMetadata?.groupBy;
+			cachedCommonKeys = getCommonGroupByKeys(
+				sourceMetadata?.groupBy,
+				syncMetadata?.groupBy,
+			);
+		}
+
+		controller.syncedSeriesIndexes = applyReceiverSync({
+			uPlotInstance: u,
+			yCrosshairEl,
+			syncKey,
+			syncMetadata,
+			sourceMetadata,
+			commonKeys: cachedCommonKeys,
+		});
+	};
+}

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/tooltipController.ts

@@ -27,6 +27,7 @@ export function createInitialControllerState(): TooltipControllerState {
 		verticalOffset: 0,
 		seriesIndexes: [],
 		focusedSeriesIndex: null,
+		syncedSeriesIndexes: null,
 		cursorDrivenBySync: false,
 		plotWithinViewport: false,
 		windowWidth: window.innerWidth - WINDOW_OFFSET,
@@ -184,7 +185,7 @@ export function createSetLegendHandler(
 			return;
 		}
 
-		const newSeriesIndexes = plot.cursor.idxs.slice();
+		const newSeriesIndexes = [...plot.cursor.idxs];
 		const isAnySeriesActive = newSeriesIndexes.some((v, i) => i > 0 && v != null);
 
 		const previousCursorDrivenBySync = controller.cursorDrivenBySync;

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/types.ts

@@ -4,6 +4,7 @@ import type {
 	ReactNode,
 	RefObject,
 } from 'react';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import type uPlot from 'uplot';
 
 import type { TooltipRenderArgs } from '../../components/types';
@@ -39,6 +40,7 @@ export interface TooltipLayoutInfo {
 
 export interface TooltipSyncMetadata {
 	yAxisUnit?: string;
+	groupBy?: BaseAutocompleteData[];
 }
 
 export interface TooltipPluginProps {
@@ -95,6 +97,11 @@ export interface TooltipControllerState {
 	verticalOffset: number;
 	seriesIndexes: Array<number | null>;
 	focusedSeriesIndex: number | null;
+	/** Receiver-side series filtering for Tooltip sync mode.
+	 * null  = no filtering (source panel or no groupBy configured)
+	 * []    = no matching series found → hide the synced tooltip
+	 * [...] = only these 1-based series indexes should appear in the synced tooltip */
+	syncedSeriesIndexes: number[] | null;
 	cursorDrivenBySync: boolean;
 	plotWithinViewport: boolean;
 	windowWidth: number;

frontend/src/periscope/components/ContextMenu/styles.scss

@@ -4,7 +4,7 @@
 	gap: 8px;
 	padding: 8px;
 	cursor: pointer;
-	color: var(--muted-foreground);
+	color: var(--foreground);
 	font-family: Inter;
 	font-size: var(--font-size-sm);
 	font-weight: 600;
@@ -20,10 +20,13 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 
-	&:hover,
+	&:hover {
+		background-color: var(--l1-background);
+	}
+
 	&:focus {
 		outline: none;
-		background-color: var(--l2-background-hover);
+		background-color: var(--l1-background);
 	}
 
 	&.disabled {
@@ -44,8 +47,7 @@
 		}
 
 		&:hover {
-			background-color: var(--danger-background);
-			color: var(--l1-foreground);
+			background-color: var(--bg-cherry-100);
 		}
 	}
 
@@ -72,24 +74,73 @@
 }
 
 .context-menu-header {
-	padding: 8px 12px;
-	border-bottom: 1px solid var(--l2-border);
+	padding-bottom: 4px;
+	border-bottom: 1px solid var(--l1-border);
 	color: var(--muted-foreground);
 }
 
+// Target the popover inner specifically for context menu
 .context-menu .ant-popover-inner {
-	padding: 0;
-	border-radius: 6px;
-	max-width: 300px;
-	background: var(--l2-background) !important;
-	border: 1px solid var(--l2-border) !important;
+	padding: 12px 8px !important;
+	// max-height: 254px !important;
+	max-width: 300px !important;
 }
 
+// Dark mode support
+.darkMode {
+	.context-menu-item {
+		color: var(--muted-foreground);
+
+		&:hover,
+		&:focus {
+			background-color: var(--l2-background);
+		}
+
+		&.danger {
+			color: var(--bg-cherry-400);
+
+			.icon {
+				color: var(--bg-cherry-400);
+			}
+
+			&:hover {
+				background-color: var(--danger-background);
+				color: var(--l1-foreground);
+			}
+		}
+
+		.icon {
+			color: var(--bg-robin-400);
+		}
+	}
+
+	.context-menu-header {
+		border-bottom: 1px solid var(--l1-border);
+		color: var(--muted-foreground);
+	}
+
+	// Set the menu popover background
+	.context-menu .ant-popover-inner {
+		background: var(--l1-background) !important;
+		border: 1px solid var(--border) !important;
+	}
+}
+
+// Context menu backdrop overlay
 .context-menu-backdrop {
 	position: fixed;
-	inset: 0;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
 	z-index: 9999;
 	background: transparent;
 	cursor: default;
+
+	// Prevent any pointer events from reaching elements behind
 	pointer-events: auto;
+
+	// Ensure it covers the entire viewport including any scrollable areas
+	position: fixed !important;
+	inset: 0;
 }