From cc7cbbf29dc1ecf25399393a167284d58c214431 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Tue, 14 Apr 2026 22:37:48 +0200
Subject: [PATCH] fix: use inline style for time slot dimming in teleported
 dropdown

VAutocomplete renders its dropdown list in a teleported overlay outside
the component DOM tree. Scoped :deep() CSS cannot reach teleported
content. Switch from class-based opacity to inline style on VListItem.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/app/src/components/sections/CreateShiftDialog.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/apps/app/src/components/sections/CreateShiftDialog.vue b/apps/app/src/components/sections/CreateShiftDialog.vue
index ccdffd54..383d3309 100644
--- a/apps/app/src/components/sections/CreateShiftDialog.vue
+++ b/apps/app/src/components/sections/CreateShiftDialog.vue
@@ -265,7 +265,7 @@ function onSubmit() {
 
                   <VListItem
                     v-bind="itemProps"
-                    :class="{ 'time-slot-dimmed': item.raw._isDimmed }"
+                    :style="item.raw._isDimmed ? 'opacity: 0.55' : ''"
                   >
                     <template #title>
                       {{ item.raw.name }}
@@ -425,10 +425,3 @@ function onSubmit() {
     </VCard>
   </VDialog>
 </template>
-
-<style scoped>
-/* Dimmed festival-level time slots in sub-event dropdown (scenario A/D) */
-:deep(.time-slot-dimmed) {
-  opacity: 0.65;
-}
-</style>