feat: Make stepper draggable and take up more width

legalconsenthub/app/components/FormStepperWithNavigation.vue

@@ -2,8 +2,6 @@
   <div class="flex flex-col w-full">
     <div class="w-full p-4">
       <div class="flex flex-col gap-4 sm:gap-6 w-full">
-        <slot />
-
         <div class="lch-stepper relative">
           <div
             ref="stepperScrollEl"
@@ -13,10 +11,7 @@
               ref="stepper"
               v-model="activeStepperItemIndex"
               :items="stepperItems"
-              :ui="{
+              :ui="stepperUi"
-                header: 'flex w-full flex-nowrap',
-                item: 'w-auto shrink-0 flex-[0_0_calc(100%/6)] min-w-[14rem]'
-              }"
               :linear="false"
               class="w-full"
             />
@@ -57,6 +52,7 @@
 
     <div class="w-full p-4">
       <div class="flex flex-col gap-4 sm:gap-6 w-full lg:max-w-4xl mx-auto">
+        <slot />
         <h1 v-if="currentFormElementSection?.title" class="text-xl text-pretty font-bold text-highlighted">
           {{ currentFormElementSection.title }}
         </h1>
@@ -175,6 +171,7 @@ const initialScrollLeft = ref(0)
 const initialPointerX = ref(0)
 const canScrollLeft = ref(false)
 const canScrollRight = ref(false)
+const hasOverflow = ref(false)
 
 const { evaluateFormElementVisibility } = useFormElementVisibility()
 const { clearHiddenFormElementValues } = useFormElementValueClearing()
@@ -222,6 +219,11 @@ const cursorClass = computed(
       : 'cursor-grab' // Ready to drag: open hand
 )
 
+const stepperUi = computed(() => ({
+  header: hasOverflow.value ? 'flex w-full flex-nowrap' : 'flex w-full flex-nowrap justify-center',
+  item: 'w-auto shrink-0 flex-[0_0_calc(100%/6)] min-w-[14rem]'
+}))
+
 const visibleSubsections = computed(() => {
   if (!currentFormElementSection.value?.formElementSubSections) {
     return []
@@ -330,10 +332,12 @@ function updateStepperOverflowIndicators() {
   if (!scroller) {
     canScrollLeft.value = false
     canScrollRight.value = false
+    hasOverflow.value = false
     return
   }
 
   const maxScrollLeft = Math.max(0, scroller.scrollWidth - scroller.clientWidth)
+  hasOverflow.value = maxScrollLeft > 0
   canScrollLeft.value = scroller.scrollLeft > 1
   canScrollRight.value = scroller.scrollLeft < maxScrollLeft - 1
 }

legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue

@@ -40,7 +40,11 @@
         @navigate="handleNavigate"
         @add-input-form="handleAddInputForm"
         @update:form-element-sections="handleFormElementSectionsUpdate"
-      />
+      >
+        <UFormField :label="$t('common.name')" class="mb-4">
+          <UInput v-model="applicationForm.name" class="w-full" :disabled="isReadOnly" />
+        </UFormField>
+      </FormStepperWithNavigation>
     </template>
   </UDashboardPanel>
 </template>