Skip to content

Commit

Permalink
💄 Fix width of progress indicator
Browse files Browse the repository at this point in the history
The bar was not taking up full width due to the negative margin-left
and margin-right values, combined with the width: 100% of the
parent. Setting the width to calc(100% + 2 * margin) results
in a horizontal scrollbar, but unsetting the width fixes the
styling on mobile while not destroying it on desktop.

Backport-of: #550
  • Loading branch information
sergei-maertens committed Sep 27, 2023
1 parent 52e17fa commit 994ecc3
Showing 1 changed file with 2 additions and 0 deletions.
2 changes: 2 additions & 0 deletions src/scss/components/_progress-indicator.scss
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@
@include mobile-only {
@include margin($grid-container-margin, $properties: (padding-top, padding-bottom));
box-shadow: var(--of-progress-indicator-mobile-box-shadow);
// otherwise the bar is too short, and setting a width creates a horizontal scrollbar
width: unset;

// style layout
@at-root .#{prefix('layout__row')} & {
Expand Down

0 comments on commit 994ecc3

Please sign in to comment.