bert.hausmans/crewli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: maak crowd list detail drawer scrollbaar

Browse Source 
Made-with: Cursor
This commit is contained in:
bert.hausmans
2026-04-12 13:59:00 +02:00
parent 6dccf87234
commit c6912c0d54
1 changed files with 32 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
apps/app/src/components/crowd-lists/CrowdListDetailPanel.vue
View File

@@ -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>