From c6912c0d54750171250787f7e7aca1166713fe7c Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Sun, 12 Apr 2026 13:59:00 +0200
Subject: [PATCH] fix: maak crowd list detail drawer scrollbaar

Made-with: Cursor
---
 .../crowd-lists/CrowdListDetailPanel.vue      | 47 +++++++++++++------
 1 file changed, 32 insertions(+), 15 deletions(-)

diff --git a/apps/app/src/components/crowd-lists/CrowdListDetailPanel.vue b/apps/app/src/components/crowd-lists/CrowdListDetailPanel.vue
index c7f87661..55908ed6 100644
--- a/apps/app/src/components/crowd-lists/CrowdListDetailPanel.vue
+++ b/apps/app/src/components/crowd-lists/CrowdListDetailPanel.vue
@@ -228,13 +228,19 @@ function onApproveAllExecute() {
 <template>
   <VNavigationDrawer
     v-model="modelValue"
+    class="crowd-list-detail-drawer"
     location="end"
     temporary
     :width="560"
   >
     <template v-if="crowdList">
-      <!-- ═══ Section 1: Header ═══ -->
-      <div class="pa-6 pb-4">
+      <div
+        class="d-flex flex-column h-100 overflow-hidden"
+        style="min-height: 0;"
+      >
+        <div class="flex-shrink-0">
+          <!-- ═══ Section 1: Header ═══ -->
+          <div class="pa-6 pb-4">
         <div class="d-flex justify-space-between align-start mb-3">
           <h5 class="text-h5">
             {{ crowdList.name }}
@@ -380,12 +386,12 @@ function onApproveAllExecute() {
             </VCard>
           </VCol>
         </VRow>
-      </div>
+          </div>
 
-      <VDivider />
+          <VDivider />
 
-      <!-- ═══ Section 2: Capacity Overview ═══ -->
-      <div class="pa-6 py-4">
+          <!-- ═══ Section 2: Capacity Overview ═══ -->
+          <div class="pa-6 py-4">
         <template v-if="crowdList.max_persons">
           <div class="d-flex justify-space-between align-center mb-2">
             <span class="text-body-2 font-weight-medium">Bezetting</span>
@@ -475,12 +481,12 @@ function onApproveAllExecute() {
             · Geen limiet ingesteld
           </span>
         </div>
-      </div>
+          </div>
 
-      <VDivider />
+          <VDivider />
 
-      <!-- ═══ Section 3: Quick Actions ═══ -->
-      <div class="pa-6 py-3 d-flex gap-x-2">
+          <!-- ═══ Section 3: Quick Actions ═══ -->
+          <div class="pa-6 py-3 d-flex gap-x-2">
         <VBtn
           size="small"
           prepend-icon="tabler-plus"
@@ -500,12 +506,16 @@ function onApproveAllExecute() {
         >
           Alle pending goedkeuren ({{ pendingPersonIds.length }})
         </VBtn>
-      </div>
+          </div>
 
-      <VDivider />
+          <VDivider />
+        </div>
 
-      <!-- ═══ Section 4: Person List ═══ -->
-      <div class="pa-6 pt-4">
+        <!-- ═══ Section 4: Person List (scrollable) ═══ -->
+        <div
+          class="pa-6 pt-4 flex-grow-1 overflow-y-auto"
+          style="min-height: 0;"
+        >
         <div class="d-flex justify-space-between align-center mb-3">
           <h6 class="text-h6">
             Personen ({{ crowdList.persons_count }})
@@ -697,8 +707,8 @@ function onApproveAllExecute() {
             </VCardText>
           </VCard>
         </div>
+        </div>
       </div>
-    </template>
 
     <!-- Add person dialog -->
     <AddPersonToCrowdListDialog
@@ -778,5 +788,12 @@ function onApproveAllExecute() {
     >
       {{ successMessage }}
     </VSnackbar>
+    </template>
   </VNavigationDrawer>
 </template>
+
+<style scoped>
+.crowd-list-detail-drawer :deep(.v-navigation-drawer__content) {
+  min-height: 0;
+}
+</style>