+
{{ currentFormElementSection.title }}
@@ -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"
- />
+ >
+
+
+
+