From 34c9a37663bf30f86cb3e98a1da6334c6764d66c Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Fri, 15 Sep 2023 22:42:25 +0200
Subject: [PATCH] :lipstick: Fix width of progress indicator

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.
---
 src/scss/components/_progress-indicator.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/scss/components/_progress-indicator.scss b/src/scss/components/_progress-indicator.scss
index fccfddb84..8dd13892b 100644
--- a/src/scss/components/_progress-indicator.scss
+++ b/src/scss/components/_progress-indicator.scss
@@ -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')} & {