[pull] main from SigNoz:main

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

@@ -0,0 +1,77 @@
+import { ReactNode } from 'react';
+import { Dock, PanelBottom, PanelRight } from '@signozhq/icons';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
+import {
+	TooltipContent,
+	TooltipProvider,
+	TooltipRoot,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
+
+import { SpanDetailVariant } from './constants';
+
+interface DockOption {
+	value: SpanDetailVariant;
+	icon: ReactNode;
+	tooltip: string;
+}
+
+const DOCK_OPTIONS: DockOption[] = [
+	{
+		value: SpanDetailVariant.DIALOG,
+		icon: <Dock size={14} />,
+		tooltip: 'Open as floating panel',
+	},
+	{
+		value: SpanDetailVariant.DOCKED,
+		icon: <PanelBottom size={14} />,
+		tooltip: 'Dock at the bottom',
+	},
+	{
+		value: SpanDetailVariant.DOCKED_RIGHT,
+		icon: <PanelRight size={14} />,
+		tooltip: 'Dock on the right',
+	},
+];
+
+interface DockModeSwitcherProps {
+	value: SpanDetailVariant;
+	onChange: (value: SpanDetailVariant) => void;
+	tooltipClassName?: string;
+}
+
+function DockModeSwitcher({
+	value,
+	onChange,
+	tooltipClassName,
+}: DockModeSwitcherProps): JSX.Element {
+	return (
+		<TooltipProvider>
+			<ToggleGroup
+				type="single"
+				value={value}
+				onChange={(v): void => {
+					if (v) {
+						onChange(v as SpanDetailVariant);
+					}
+				}}
+				size="sm"
+			>
+				{DOCK_OPTIONS.map((option) => (
+					<TooltipRoot key={option.value}>
+						<TooltipTrigger asChild>
+							<span>
+								<ToggleGroupItem value={option.value}>{option.icon}</ToggleGroupItem>
+							</span>
+						</TooltipTrigger>
+						<TooltipContent className={tooltipClassName}>
+							{option.tooltip}
+						</TooltipContent>
+					</TooltipRoot>
+				))}
+			</ToggleGroup>
+		</TooltipProvider>
+	);
+}
+
+export default DockModeSwitcher;

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

@@ -3,6 +3,10 @@
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
+
+	:global(.details-header) {
+		height: 39px;
+	}
 }
 
 .body {

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

@@ -1,25 +1,16 @@
 import { useCallback, useMemo } from 'react';
-import { Button } from '@signozhq/ui/button';
 import {
 	TabsContent,
 	TabsList,
 	TabsRoot,
 	TabsTrigger,
 } from '@signozhq/ui/tabs';
-import {
-	TooltipRoot,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from '@signozhq/ui/tooltip';
 import {
 	Bookmark,
 	CalendarClock,
 	ChartColumnBig,
-	Dock,
 	Link2,
 	List,
-	PanelBottom,
 	ScrollText,
 	Timer,
 } from '@signozhq/icons';
@@ -61,6 +52,7 @@ import {
 	SpanDetailVariant,
 	VISIBLE_ACTIONS,
 } from './constants';
+import DockModeSwitcher from './DockModeSwitcher';
 import { useSpanAttributeActions } from './hooks/useSpanAttributeActions';
 import { useTracePinnedFields } from './hooks/useTracePinnedFields';
 import {
@@ -492,31 +484,14 @@ function SpanDetailsPanel({
 		];
 
 		if (onVariantChange) {
-			const isDocked = variant === SpanDetailVariant.DOCKED;
 			actions.push({
-				key: 'dock-toggle',
+				key: 'dock-mode',
 				component: (
-					<TooltipProvider>
-						<TooltipRoot>
-							<TooltipTrigger asChild>
-								<Button
-									variant="ghost"
-									size="icon"
-									color="secondary"
-									onClick={(): void =>
-										onVariantChange(
-											isDocked ? SpanDetailVariant.DIALOG : SpanDetailVariant.DOCKED,
-										)
-									}
-								>
-									{isDocked ? <Dock size={14} /> : <PanelBottom size={14} />}
-								</Button>
-							</TooltipTrigger>
-							<TooltipContent className={styles.dockToggleTooltip}>
-								{isDocked ? 'Open as floating panel' : 'Dock at the bottom'}
-							</TooltipContent>
-						</TooltipRoot>
-					</TooltipProvider>
+					<DockModeSwitcher
+						value={variant}
+						onChange={onVariantChange}
+						tooltipClassName={styles.dockToggleTooltip}
+					/>
 				),
 			});
 		}
@@ -553,7 +528,10 @@ function SpanDetailsPanel({
 		</>
 	);
 
-	if (variant === SpanDetailVariant.DOCKED) {
+	if (
+		variant === SpanDetailVariant.DOCKED ||
+		variant === SpanDetailVariant.DOCKED_RIGHT
+	) {
 		return <div className={styles.root}>{content}</div>;
 	}
 

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/constants.ts

@@ -22,6 +22,7 @@ export enum SpanDetailVariant {
 	DRAWER = 'drawer',
 	DIALOG = 'dialog',
 	DOCKED = 'docked',
+	DOCKED_RIGHT = 'right',
 }
 
 export const KEY_ATTRIBUTE_KEYS: Record<string, string[]> = {

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

@@ -4,13 +4,28 @@
 	flex-direction: column;
 }
 
+.layoutRow {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+}
+
 .content {
 	display: flex;
 	flex-direction: column;
 	flex: 1;
+	min-width: 0;
 	overflow: hidden;
 }
 
+.rightDock {
+	display: flex;
+	flex-direction: column;
+	border-left: 1px solid var(--l2-border);
+	min-width: 0;
+}
+
 // Shared Ant Collapse chrome reset for both the flamegraph and waterfall
 // collapse panels.
 .flameCollapse,

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

@@ -893,7 +893,7 @@ function Success(props: ISuccessProps): JSX.Element {
 					/>
 					{/* Left panel - table with horizontal scroll */}
 					<ResizableBox
-						direction="horizontal"
+						handle="right"
 						defaultWidth={DEFAULT_SIDEBAR_WIDTH}
 						minWidth={MIN_SIDEBAR_WIDTH}
 						maxWidth={MAX_SIDEBAR_WIDTH}