From e6c686dd32c0658c2359df92292b307d8c177b81 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 11 Oct 2022 18:03:39 +0530
Subject: [PATCH] fix: provide proper z-index value to avoid unexpected
 behaviour

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/attachment/Carousel.vue | 2 +-
 packages/nc-gui/components/general/Overlay.vue          | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index d9ecd64aeb..0c134850f7 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -47,7 +47,7 @@ onClickOutside(carouselRef, () => {
 </script>
 
 <template>
-  <general-overlay v-model="selectedImage">
+  <general-overlay v-model="selectedImage" z-index="1001">
     <template v-if="selectedImage">
       <div class="overflow-hidden p-12 text-center relative">
         <div class="text-white group absolute top-5 right-5">
diff --git a/packages/nc-gui/components/general/Overlay.vue b/packages/nc-gui/components/general/Overlay.vue
index 9ec8eb001f..a8664c2245 100644
--- a/packages/nc-gui/components/general/Overlay.vue
+++ b/packages/nc-gui/components/general/Overlay.vue
@@ -11,15 +11,18 @@ interface Props {
   target?: TeleportProps['to']
   teleportDisabled?: TeleportProps['disabled']
   transition?: boolean
+  zIndex?: string | number
 }
 
 interface Emits {
   (event: 'update:modelValue', value: boolean): void
+
   (event: 'close'): void
+
   (event: 'open'): void
 }
 
-const { transition = true, teleportDisabled = false, inline = false, target, ...rest } = defineProps<Props>()
+const { transition = true, teleportDisabled = false, inline = false, target, zIndex = 100, ...rest } = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
@@ -47,8 +50,9 @@ export default {
       <div
         v-show="!!vModel"
         v-bind="$attrs"
+        :style="{ zIndex }"
         :class="[inline ? 'absolute' : 'fixed']"
-        class="z-2000 top-0 left-0 bottom-0 right-0 bg-gray-700/75"
+        class="top-0 left-0 bottom-0 right-0 bg-gray-700/75"
       >
         <slot :is-open="vModel" />
       </div>