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:
@@ -142,9 +142,11 @@ const timeSlotsByDate = computed(() => {
|
|||||||
const totalSelectedHours = computed(() => {
|
const totalSelectedHours = computed(() => {
|
||||||
if (!registrationData.value?.time_slots) return 0
|
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))
|
.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(() => {
|
const formattedDates = computed(() => {
|
||||||
@@ -975,7 +977,10 @@ async function onSubmit() {
|
|||||||
<h4 class="text-subtitle-1 font-weight-bold mb-2 text-capitalize">
|
<h4 class="text-subtitle-1 font-weight-bold mb-2 text-capitalize">
|
||||||
{{ formatDate(date) }}
|
{{ formatDate(date) }}
|
||||||
</h4>
|
</h4>
|
||||||
<VList density="compact">
|
<VList
|
||||||
|
density="compact"
|
||||||
|
class="registration-availability-list"
|
||||||
|
>
|
||||||
<VListItem
|
<VListItem
|
||||||
v-for="slot in slots"
|
v-for="slot in slots"
|
||||||
:key="slot.id"
|
:key="slot.id"
|
||||||
@@ -1107,4 +1112,12 @@ async function onSubmit() {
|
|||||||
max-inline-size: 100%;
|
max-inline-size: 100%;
|
||||||
min-inline-size: 0;
|
min-inline-size: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Vuetify’s .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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user