fix(portal): remove unnecessary scrollbars on registration availability step

Vuetify VList defaults to overflow:auto; override to visible for the
availability list. Coerce duration_hours to number when summing hours
so API decimal strings do not string-concatenate.

Made-with: Cursor
This commit is contained in:
2026-04-12 19:56:37 +02:00
parent d06cb01726
commit 2102a35688

View File

@@ -142,9 +142,11 @@ const timeSlotsByDate = computed(() => {
const totalSelectedHours = computed(() => {
if (!registrationData.value?.time_slots) return 0
return registrationData.value.time_slots
const total = registrationData.value.time_slots
.filter(s => selectedTimeSlotIds.value.includes(s.id))
.reduce((sum, s) => sum + s.duration_hours, 0)
.reduce((sum, s) => sum + Number(s.duration_hours), 0)
return Math.round(total * 100) / 100
})
const formattedDates = computed(() => {
@@ -975,7 +977,10 @@ async function onSubmit() {
<h4 class="text-subtitle-1 font-weight-bold mb-2 text-capitalize">
{{ formatDate(date) }}
</h4>
<VList density="compact">
<VList
density="compact"
class="registration-availability-list"
>
<VListItem
v-for="slot in slots"
:key="slot.id"
@@ -1107,4 +1112,12 @@ async function onSubmit() {
max-inline-size: 100%;
min-inline-size: 0;
}
/*
Vuetifys .v-list uses overflow: auto, which shows scrollbars on this step when
list rows are slightly wider than the card (e.g. checkbox + text + rating).
*/
.registration-availability-list {
overflow: visible !important;
}
</style>