pkp/pkp-lib#10473 Submission wizard stepper glitches at widths of 104…

…0px and below (pkp#427)

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

* pkp/pkp-lib#10473 Wrap the button stepper in a span to correct the calculation of width for small screen responsiveness

src/components/Steps/Steps.vue

@@ -23,30 +23,34 @@
 					}"
 				>
 					<template v-if="startedSteps.includes(step.id)">
-						<button
-							:ref="'button' + step.id"
-							class="pkpSteps__step__label"
-							:class="
-								current === step.id
-									? 'pkpSteps__step__label--current'
-									: completedSteps.includes(step.id)
-										? 'pkpSteps__step__label--completed'
-										: ''
-							"
-							@click="setCurrent(step.id)"
-						>
-							<span class="pkpSteps__step__number">
-								<template
-									v-if="current !== step.id && completedSteps.includes(step.id)"
-								>
-									<Icon icon="check" />
-								</template>
-								<template v-else>
-									{{ i + 1 }}
-								</template>
-							</span>
-							{{ step.label }}
-						</button>
+						<span>
+							<button
+								:ref="'button' + step.id"
+								class="pkpSteps__step__label"
+								:class="
+									current === step.id
+										? 'pkpSteps__step__label--current'
+										: completedSteps.includes(step.id)
+											? 'pkpSteps__step__label--completed'
+											: ''
+								"
+								@click="setCurrent(step.id)"
+							>
+								<span class="pkpSteps__step__number">
+									<template
+										v-if="
+											current !== step.id && completedSteps.includes(step.id)
+										"
+									>
+										<Icon icon="check" />
+									</template>
+									<template v-else>
+										{{ i + 1 }}
+									</template>
+								</span>
+								{{ step.label }}
+							</button>
+						</span>
 					</template>
 					<template v-else>
 						<span :ref="'button' + step.id" class="pkpSteps__step__label">
@@ -217,7 +221,7 @@ export default {
 		 */
 		maybeToggleCollapsedView() {
 			const totalWidth = this.$refs.buttons.offsetWidth;
-			const allSteps = this.$refs.buttons.querySelectorAll('li');
+			const allSteps = this.$refs.buttons.querySelectorAll('li>span');
 			const allStepsWidth = Array.prototype.slice
 				.call(allSteps)
 				.reduce((totalWidth, button) => {