Add pipeline duration - UX adjustment

What does this MR do and why?

UX adjustment for pipeline details header refactor (behind flag pipeline_details_header_vue). Displays pipeline duration according to design when pipeline is finsihed.

First MR: !120634 (merged)

Second MR: !121174 (merged)

Third MR: !122216 (merged)

Fourth MR: !122516 (merged)

Design can be found here #394768[Unbox-pipeline-detail-page.png]

Screenshots or screen recordings

Before	After

How to set up and validate locally

1. Enable pipeline_details_header_vue in the rails console
2. Visit a finished pipeline (should display duration)
3. Visit a running pipeline (should not display duration)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #394768 (closed)