From 2102a35688f9b9d3d866355a468b29bd07bbf8e3 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Sun, 12 Apr 2026 19:56:37 +0200
Subject: [PATCH] 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
---
 .../portal/src/pages/register/[eventSlug].vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/portal/src/pages/register/[eventSlug].vue b/apps/portal/src/pages/register/[eventSlug].vue
index 2cfd463f..3b7a444c 100644
--- a/apps/portal/src/pages/register/[eventSlug].vue
+++ b/apps/portal/src/pages/register/[eventSlug].vue
@@ -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;
 }
+
+/*
+  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>