diff --git a/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_stepper.scss b/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_stepper.scss
index 7c8c3f28..b9f23b8c 100644
--- a/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_stepper.scss
+++ b/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_stepper.scss
@@ -46,6 +46,18 @@
         box-shadow: $fp-glow-ring-amber;
         animation: fp-pulse-amber 1.8s ease-in-out infinite;
     }
+
+    // Connector lines that flex-grow to fill the row between circles.
+    // MUST stay nested inside .o_fp_stepper or flex:1 doesn't apply
+    // (and the circles cluster on the left with no gaps).
+    .o_fp_step_line {
+        flex: 1;
+        height: 2px;
+        margin: 0 3px;
+        background: $fp-card-border;
+        &.o_fp_step_line_done { background: $fp-teal; }
+        &.o_fp_step_line_warn { background: $fp-amber; }
+    }
 }
 
 // Pulsing glow for the active step indicator. Kept subtle - the ring
@@ -69,15 +81,6 @@
     .o_fp_timeline_active .o_fp_timeline_dot {
         animation: none;
     }
-
-    .o_fp_step_line {
-        flex: 1;
-        height: 2px;
-        margin: 0 3px;
-        background: $fp-card-border;
-        &.o_fp_step_line_done { background: $fp-teal; }
-        &.o_fp_step_line_warn { background: $fp-amber; }
-    }
 }
 
 // Step labels row below the stepper