fix: make the trace details collapsed sidebar match the design

frontend/src/container/AppLayout/index.tsx

@@ -255,19 +255,16 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	const isDashboardListView = (): boolean => routeKey === 'ALL_DASHBOARD';
 	const isAlertHistory = (): boolean => routeKey === 'ALERT_HISTORY';
 	const isAlertOverview = (): boolean => routeKey === 'ALERT_OVERVIEW';
-	const isDashboardView = (): boolean => {
-		/**
-		 * need to match using regex here as the getRoute function will not work for
-		 * routes with id
-		 */
-		const regex = /^\/dashboard\/[a-zA-Z0-9_-]+$/;
-		return regex.test(pathname);
-	};
+	const isPathMatch = (regex: RegExp): boolean => regex.test(pathname);
 
-	const isDashboardWidgetView = (): boolean => {
-		const regex = /^\/dashboard\/[a-zA-Z0-9_-]+\/new$/;
-		return regex.test(pathname);
-	};
+	const isDashboardView = (): boolean =>
+		isPathMatch(/^\/dashboard\/[a-zA-Z0-9_-]+$/);
+
+	const isDashboardWidgetView = (): boolean =>
+		isPathMatch(/^\/dashboard\/[a-zA-Z0-9_-]+\/new$/);
+
+	const isTraceDetailsView = (): boolean =>
+		isPathMatch(/^\/trace\/[a-zA-Z0-9]+(\?.*)?$/);
 
 	useEffect(() => {
 		if (isDarkMode) {
@@ -356,6 +353,8 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 											isMessagingQueues()
 												? 0
 												: '0 1rem',
+
+										...(isTraceDetailsView() ? { marginRight: 0 } : {}),
 									}}
 								>
 									{isToDisplayLayout && !renderFullScreen && <TopNav />}

frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx

@@ -98,16 +98,10 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 				styledclass={[styles.selectedSpanDetailsContainer, styles.overflow]}
 				direction="vertical"
 			>
-				<Row
-					align="middle"
-					justify="space-between"
-					style={{
-						marginTop: '16px',
-					}}
-				>
+				<Row align="middle" justify="space-between">
 					<Typography.Text strong>Details for selected Span</Typography.Text>
 					<Button
-						className="periscope-btn nav-item-label "
+						className="periscope-btn nav-item-label expand-collapse-btn"
 						icon={<PanelRight size={16} />}
 						onClick={(): void => setCollapsed((prev) => !prev)}
 					/>

frontend/src/container/TraceDetail/TraceDetails.styles.scss

@@ -22,6 +22,8 @@
 	}
 
 	.expand-collapse-btn {
-		margin: 12px 0 0 12px;
+		padding: 4px;
+		height: auto;
+		width: auto;
 	}
 }

frontend/src/container/TraceDetail/index.tsx

@@ -268,9 +268,8 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 				collapsed={collapsed}
 				reverseArrow
 				width={300}
-				collapsedWidth={40}
+				collapsedWidth={48}
 				defaultCollapsed
-				// onCollapse={(value): void => setCollapsed(value)}
 				trigger={null}
 				data-testid="span-details-sider"
 			>

frontend/src/container/TraceDetail/styles.ts

@@ -59,6 +59,8 @@ export const selectedSpanDetailContainer = css`
 	position: relative;
 	display: flex;
 	flex-direction: column;
+	align-items: center;
+	padding-top: 12px;
 `;
 
 /**