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 b9f23b8c..4b611253 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
@@ -8,7 +8,19 @@
.o_fp_stepper {
display: flex;
align-items: center;
- margin-bottom: .35rem;
+ // Bottom space for the absolutely-positioned labels below each circle.
+ // ~2.2rem covers two short lines (title + time_label).
+ margin-bottom: 2.4rem;
+
+ // Each unit holds one circle + its label. The label is absolutely
+ // positioned (see .o_fp_step_label below) so its horizontal centre
+ // lines up with the circle's centre even when text is wider than 24px.
+ .o_fp_step_unit {
+ position: relative;
+ flex-shrink: 0;
+ width: 24px;
+ height: 24px;
+ }
.o_fp_step_circle {
width: 24px;
@@ -20,7 +32,6 @@
font-family: $fp-font;
font-size: .65rem;
font-weight: 700;
- flex-shrink: 0;
background: $fp-card-bg;
border: 1.5px solid $fp-card-border;
color: $fp-muted-light;
@@ -58,6 +69,40 @@
&.o_fp_step_line_done { background: $fp-teal; }
&.o_fp_step_line_warn { background: $fp-amber; }
}
+
+ // Label centred on its circle via absolute positioning. Wider text
+ // ("Inspected") overflows equally left + right instead of pushing
+ // the column or sitting in a separate flex slot.
+ .o_fp_step_label {
+ position: absolute;
+ top: calc(100% + .45rem);
+ left: 50%;
+ transform: translateX(-50%);
+ text-align: center;
+ white-space: nowrap;
+ font-size: .68rem;
+
+ .o_fp_step_label_title {
+ color: $fp-muted-light;
+ font-weight: 500;
+ }
+ .o_fp_step_label_time {
+ color: $fp-disabled;
+ font-size: .6rem;
+ }
+ &.o_fp_step_label_done {
+ .o_fp_step_label_title { color: $fp-text-body; }
+ .o_fp_step_label_time { color: $fp-muted-light; }
+ }
+ &.o_fp_step_label_active {
+ .o_fp_step_label_title { color: $fp-teal; font-weight: 700; }
+ .o_fp_step_label_time { color: $fp-teal; }
+ }
+ &.o_fp_step_label_active_warn {
+ .o_fp_step_label_title { color: $fp-amber-text; font-weight: 700; }
+ .o_fp_step_label_time { color: $fp-amber-text; }
+ }
+ }
}
// Pulsing glow for the active step indicator. Kept subtle - the ring
@@ -83,34 +128,5 @@
}
}
-// Step labels row below the stepper
-.o_fp_step_labels {
- display: flex;
- justify-content: space-between;
- font-size: .68rem;
-
- .o_fp_step_label {
- text-align: center;
- flex: 1;
- .o_fp_step_label_title {
- color: $fp-muted-light;
- font-weight: 500;
- }
- .o_fp_step_label_time {
- color: $fp-disabled;
- font-size: .6rem;
- }
- &.o_fp_step_label_done {
- .o_fp_step_label_title { color: $fp-text-body; }
- .o_fp_step_label_time { color: $fp-muted-light; }
- }
- &.o_fp_step_label_active {
- .o_fp_step_label_title { color: $fp-teal; font-weight: 700; }
- .o_fp_step_label_time { color: $fp-teal; }
- }
- &.o_fp_step_label_active_warn {
- .o_fp_step_label_title { color: $fp-amber-text; font-weight: 700; }
- .o_fp_step_label_time { color: $fp-amber-text; }
- }
- }
-}
+// Legacy .o_fp_step_labels container removed — labels are now nested
+// inside each .o_fp_step_unit (see above) so they centre on their circle.
diff --git a/fusion_plating/fusion_plating_portal/views/fp_portal_macros.xml b/fusion_plating/fusion_plating_portal/views/fp_portal_macros.xml
index 3cc7364d..872cba17 100644
--- a/fusion_plating/fusion_plating_portal/views/fp_portal_macros.xml
+++ b/fusion_plating/fusion_plating_portal/views/fp_portal_macros.xml
@@ -27,17 +27,29 @@