Skip to content

Prevent layout shift on `Duration`

Administrator requested to merge kr/stable-duration-width into main

Created by: courier-new

I noticed the Duration component was causing layout shift if the time displayed was actively changing (e.g. in Batch Changes land while a batch spec is actively executing). This gives it a fixed width by letting an element with a static, filler time determine the parent width and then absolutely positioning the actual time over top of it.

Test plan

Added storybook coverage for this component to demonstrate the effect.

App preview:

Check out the client app preview documentation to learn more.

Merge request reports

Loading