From c0f3adac079a7f3b4164597b5bfbfc653cbc59c4 Mon Sep 17 00:00:00 2001
From: Denis Lugowski <denis.lugowski@gmail.com>
Date: Fri, 23 Jan 2026 17:24:03 +0100
Subject: [PATCH] feat: Make stepper draggable and take up more width

---
 .../app/components/FormStepperWithNavigation.vue | 16 ++++++++++------
 .../application-forms/[id]/[sectionIndex].vue    |  6 +++++-
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/legalconsenthub/app/components/FormStepperWithNavigation.vue b/legalconsenthub/app/components/FormStepperWithNavigation.vue
index aa7e069..86dd5af 100644
--- a/legalconsenthub/app/components/FormStepperWithNavigation.vue
+++ b/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="{
-                header: 'flex w-full flex-nowrap',
-                item: 'w-auto shrink-0 flex-[0_0_calc(100%/6)] min-w-[14rem]'
-              }"
+              :ui="stepperUi"
               :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
 }
diff --git a/legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue b/legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue
index d926ef6..7f37e6b 100644
--- a/legalconsenthub/app/pages/application-forms/[id]/[sectionIndex].vue
+++ b/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>