Bug report

The linear progress component renders incorrectly with text-align: center or text-align: right. This applies for all forms of the linear progress component.

Steps to reproduce

Set text-align: center on any ancestor of the linear progress component.

Actual behavior

For text-align: center, the colored part of the progress bar moves to the center (and for reversed, half is no longer within the component and is no longer visible). For text-align: right, the colored part of the progress bar is moved such that its edge is on the right (and for reversed, it's gone).

Expected behavior

The component should behave normally with any text-align for its ancestors.

Your Environment:

Additional context

This is probably going to happen for every browser, operating system, and version of MDC. There's a simple fix, though.

Possible solution

Add text-align: left to the CSS here. I don't have a good understanding of Sass/SCSS, so I'm not sure if this is exactly the place to add the line in, but essentially any element with the mdc-linear-progress class should have text-align: left applied.