diff --git a/ui/src/pages/Exchanges/ExchangeHeader.module.css b/ui/src/pages/Exchanges/ExchangeHeader.module.css
index e14c43a4..a178c68d 100644
--- a/ui/src/pages/Exchanges/ExchangeHeader.module.css
+++ b/ui/src/pages/Exchanges/ExchangeHeader.module.css
@@ -120,7 +120,7 @@
font-size: 10px;
font-weight: 600;
color: var(--text-secondary);
- margin-right: 0.5rem;
+ margin-left: auto;
flex-shrink: 0;
}
diff --git a/ui/src/pages/Exchanges/ExchangeHeader.tsx b/ui/src/pages/Exchanges/ExchangeHeader.tsx
index 55795e1d..c8e5ccd1 100644
--- a/ui/src/pages/Exchanges/ExchangeHeader.tsx
+++ b/ui/src/pages/Exchanges/ExchangeHeader.tsx
@@ -93,12 +93,6 @@ export function ExchangeHeader({ detail, onCorrelatedSelect }: ExchangeHeaderPro
{/* Correlation chain */}
Correlated
- {showChain && (() => {
- const starts = chain.map((ce: any) => new Date(ce.startTime).getTime()).filter((t: number) => !isNaN(t));
- const ends = chain.map((ce: any) => new Date(ce.endTime ?? ce.startTime).getTime() + (ce.durationMs ?? 0)).filter((t: number) => !isNaN(t));
- const totalMs = starts.length > 0 && ends.length > 0 ? Math.max(...ends) - Math.min(...starts) : 0;
- return totalMs > 0 ? Duration: {formatDuration(totalMs)} : null;
- })()}
{showChain ? chain.map((ce: any, i: number) => {
const isCurrent = ce.executionId === detail.executionId;
const variant = statusVariant(ce.status);
@@ -128,6 +122,12 @@ export function ExchangeHeader({ detail, onCorrelatedSelect }: ExchangeHeaderPro
}) : (
no correlated exchanges found
)}
+ {showChain && (() => {
+ const starts = chain.map((ce: any) => new Date(ce.startTime).getTime()).filter((t: number) => !isNaN(t));
+ const ends = chain.map((ce: any) => new Date(ce.endTime ?? ce.startTime).getTime() + (ce.durationMs ?? 0)).filter((t: number) => !isNaN(t));
+ const totalMs = starts.length > 0 && ends.length > 0 ? Math.max(...ends) - Math.min(...starts) : 0;
+ return totalMs > 0 ? Duration: {formatDuration(totalMs)} : null;
+ })()}
);