From 417127e6d92ac913331644ce41160dbabad3a64b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ferdinand=20Engl=C3=A4nder?=
 <ferdinand.englaender@concepts-and-training.de>
Date: Mon, 5 Jan 2026 17:54:04 +0100
Subject: [PATCH] [mOS ui-component fix] 10/UI/Workflow center step label
 unibe-178

---
 .../Listing/_ui-component_workflow.scss       | 21 ++++++++++++-------
 templates/default/delos.css                   | 20 +++++++++++++-----
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/templates/default/070-components/UI-framework/Listing/_ui-component_workflow.scss b/templates/default/070-components/UI-framework/Listing/_ui-component_workflow.scss
index 9b7e3be4bda..1131c04b46d 100755
--- a/templates/default/070-components/UI-framework/Listing/_ui-component_workflow.scss
+++ b/templates/default/070-components/UI-framework/Listing/_ui-component_workflow.scss
@@ -9,6 +9,7 @@
 //
 //##Workflow-steps have an icon indicating their status. The label changes color and size accordingly.
 $il-workflow-icon-size: 22px;
+$il-workflow-icon-border: 2px;
 $il-workflow-icon-font-color: white;
 $il-workflow-available-text-color: $il-text-color;
 $il-workflow-unavailable-text-color: color.scale($il-text-color, $lightness: 30%);
@@ -34,22 +35,22 @@ $il-workflow-unavailable-text-color: color.scale($il-text-color, $lightness: 30%
 	}
 }
 .il-workflow-container {
-	list-style: none;
 	padding: 0 $il-padding-small-horizontal;
+	list-style: none;
 	.il-workflow-step {
+		display: flex;
 		&:before {
 			background-color: $il-workflow-icon-font-color;
-			border: 2px solid $il-main-color;
+			border: $il-workflow-icon-border solid $il-main-color;
 			border-radius: 50%;
 			color: $il-workflow-icon-font-color;
 			content: "";
+			position: absolute;
 			font-family: Glyphicons Halflings;
 			font-size: math.floor($il-workflow-icon-size*0.52381);
 			height: $il-workflow-icon-size;
 			line-height: $il-workflow-icon-size;
 			margin-left: math.floor($il-workflow-icon-size*0.25);
-			padding-left: 0px;
-			position: absolute;
 			text-align: center;
 			width: $il-workflow-icon-size;
 		}
@@ -130,6 +131,7 @@ $il-workflow-unavailable-text-color: color.scale($il-text-color, $lightness: 30%
 			background-color: $il-main-color;
 		}
 		.text {
+			min-height: $il-workflow-icon-size * 1.5 + 2 * $il-workflow-icon-border;
 			.il-workflow-step-label,
 			.il-workflow-step-label .btn.btn-link {
 				color: $il-main-color;
@@ -140,10 +142,15 @@ $il-workflow-unavailable-text-color: color.scale($il-text-color, $lightness: 30%
 	}
 	//text
 	.text {
+		display: flex;
+		box-sizing: content-box; // so inner height equals icon height
+		flex-direction: column;
+		justify-content: center;
+		margin-left: math.ceil($il-workflow-icon-size*0.75);
 		border-left: 1px dashed $il-neutral-color;
+		padding: 0 0 $il-padding-xxxlarge-horizontal $il-workflow-icon-size * 1.5;
+		min-height: $il-workflow-icon-size + 2 * $il-workflow-icon-border;
 		font-size: $il-workflow-icon-size*0.7;
-		margin-left: math.ceil($il-workflow-icon-size*0.75);
-		padding: 0 0 $il-workflow-icon-size*1.5 $il-workflow-icon-size;
 		.il-workflow-step-label {
 			display: block;
 		}
@@ -182,4 +189,4 @@ $il-workflow-unavailable-text-color: color.scale($il-text-color, $lightness: 30%
 	.il-workflow-container {
 		padding: $il-padding-xxxlarge-vertical $il-padding-xlarge-horizontal;
 	}
-}
\ No newline at end of file
+}
diff --git a/templates/default/delos.css b/templates/default/delos.css
index a4620e8e3b4..b62a1260810 100644
--- a/templates/default/delos.css
+++ b/templates/default/delos.css
@@ -5733,8 +5733,11 @@ a[aria-disabled].il-link.link-bulky:hover {
 }
 
 .il-workflow-container {
-  list-style: none;
   padding: 0 6px;
+  list-style: none;
+}
+.il-workflow-container .il-workflow-step {
+  display: flex;
 }
 .il-workflow-container .il-workflow-step:before {
   background-color: white;
@@ -5742,13 +5745,12 @@ a[aria-disabled].il-link.link-bulky:hover {
   border-radius: 50%;
   color: white;
   content: "";
+  position: absolute;
   font-family: Glyphicons Halflings;
   font-size: 11px;
   height: 22px;
   line-height: 22px;
   margin-left: 5px;
-  padding-left: 0px;
-  position: absolute;
   text-align: center;
   width: 22px;
 }
@@ -5809,6 +5811,9 @@ a[aria-disabled].il-link.link-bulky:hover {
   line-height: 33px;
   background-color: #4c6586;
 }
+.il-workflow-container .active .text {
+  min-height: 37px;
+}
 .il-workflow-container .active .text .il-workflow-step-label,
 .il-workflow-container .active .text .il-workflow-step-label .btn.btn-link {
   color: #4c6586;
@@ -5816,10 +5821,15 @@ a[aria-disabled].il-link.link-bulky:hover {
   font-weight: 400;
 }
 .il-workflow-container .text {
+  display: flex;
+  box-sizing: content-box;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 17px;
   border-left: 1px dashed #2c2c2c;
+  padding: 0 0 18px 33px;
+  min-height: 26px;
   font-size: 15.4px;
-  margin-left: 17px;
-  padding: 0 0 33px 22px;
 }
 .il-workflow-container .text .il-workflow-step-label {
   display: block;