Fix for inline style on small screens

Author: NigelOToole

package.json

@@ -14,7 +14,7 @@
     "stepper",
     "javascript"
   ],
-  "version": "3.0.0",
+  "version": "3.0.1",
   "license": "MIT",
   "engines": {
     "node": ">=4"

src/index.html

@@ -114,7 +114,7 @@ <h3>Markers</h3>
             <h3>Markers with text</h3>
 
             <div class="demo-classes">
-              <label for="demo-classes--text">Layouts: </label>
+              <label for="demo-classes--text">Layout: </label>
               <select id="demo-classes--text" class="select demo-class-update" data-target=".demo--text .progress-tracker">
                 <option value="" selected>Default</option>
 
@@ -184,7 +184,7 @@ <h4 class="progress-title">Step 3</h4>
             <h3>Spaced</h3>
 
             <div class="demo-classes">
-              <label for="demo-classes--spaced">Layouts: </label>
+              <label for="demo-classes--spaced">Layout: </label>
               <select id="demo-classes--spaced" class="select demo-class-update" data-target=".demo--spaced .progress-tracker">
                 <option value="" selected>Default</option>
                 <option value="progress-tracker--center">Center aligned</option>
@@ -328,7 +328,7 @@ <h4 class="progress-title">Step 3</h4>
             <h3>Vertical</h3>
 
             <div class="demo-classes">
-              <label for="demo-classes--vertical">Layouts: </label>
+              <label for="demo-classes--vertical">Layout: </label>
               <select id="demo-classes--vertical" class="select demo-class-update" data-target=".demo--vertical .progress-tracker">
                 <option value="" selected>Default</option>
                 <option value="progress-tracker--center">Center aligned</option>
@@ -367,7 +367,7 @@ <h4 class="progress-title">Step 3</h4>
             <h3>Vertical spaced</h3>
 
             <div class="demo-classes">
-              <label for="demo-classes--vertical">Layouts: </label>
+              <label for="demo-classes--vertical">Layout: </label>
               <select id="demo-classes--vertical" class="select demo-class-update" data-target=".demo--vertical-spaced .progress-tracker">
                 <option value="" selected>Default</option>
                 <option value="progress-tracker--center">Center aligned</option>

src/styles/progress-tracker.css

@@ -178,9 +178,15 @@
   --marker-spacing: 8px;
 }
 
+  .progress-tracker--inline {
+  overflow: auto;
+}
+
   .progress-tracker--inline .progress-step {
     align-items: center;
     flex-direction: row;
+    min-width: -moz-fit-content;
+    min-width: fit-content;
   }
 
   .progress-tracker--inline .progress-step::before {

src/styles/progress-tracker/progress-tracker.css

@@ -193,9 +193,12 @@
 
 
 .progress-tracker--inline {
+  overflow: auto;
+  
   .progress-step {
     align-items: center;
     flex-direction: row;
+    min-width: fit-content;
 
     &::before {
       flex-shrink: 0;