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; + })()}
);