pkp/pkp-lib#10473 Fix the glitch in stepper collapsed mode

pkp · Oct 14, 2024 · 42b6c89 · 42b6c89
1 parent 3f74ed3
commit 42b6c89
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/src/components/Steps/Steps.vue b/src/components/Steps/Steps.vue
@@ -220,8 +220,11 @@ export default {
 			const allSteps = this.$refs.buttons.querySelectorAll('li');
 			const allStepsWidth = Array.prototype.slice
 				.call(allSteps)
-				.reduce((totalWidth, button) => {
-					return totalWidth + button.offsetWidth;
+				.reduce((totalWidth, li) => {
+					// if the steppers are collapsed, get the width of each stepper from the span element
+					const spanWidth = li.querySelector('span')?.offsetWidth || 0;
+					const offsetWidth = li.offsetWidth === 1 ? spanWidth : li.offsetWidth;
+					return totalWidth + offsetWidth;
 				}, 0);
 			this.collapsed = allStepsWidth > totalWidth;
 		},