From 0e9b21d7afd14e97b5eb43099e2586ff7aced517 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 5 Dec 2023 18:48:44 +0530
Subject: [PATCH] fix: Expanded json editor modal z-index issue

---
 packages/nc-gui/components/cell/Json.vue |  9 ++++++++-
 packages/nc-gui/components/nc/Modal.vue  | 14 ++++++++++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/Json.vue b/packages/nc-gui/components/cell/Json.vue
index b4eaf90dac..1bfe340b3d 100644
--- a/packages/nc-gui/components/cell/Json.vue
+++ b/packages/nc-gui/components/cell/Json.vue
@@ -150,7 +150,14 @@ watch(isExpanded, () => {
 </script>
 
 <template>
-  <component :is="isExpanded ? NcModal : 'div'" v-model:visible="isExpanded" :closable="false" centered :footer="null">
+  <component
+    :is="isExpanded ? NcModal : 'div'"
+    v-model:visible="isExpanded"
+    :closable="false"
+    centered
+    :footer="null"
+    v-bind:wrap-class-name="isExpanded ? '!z-1051' : null"
+  >
     <div v-if="editEnabled && !readonly" class="flex flex-col w-full" @mousedown.stop @mouseup.stop @click.stop>
       <div class="flex flex-row justify-between pt-1 pb-2 nc-json-action" @mousedown.stop>
         <a-button type="text" size="small" @click="isExpanded = !isExpanded">
diff --git a/packages/nc-gui/components/nc/Modal.vue b/packages/nc-gui/components/nc/Modal.vue
index c67f342dce..535ff562ce 100644
--- a/packages/nc-gui/components/nc/Modal.vue
+++ b/packages/nc-gui/components/nc/Modal.vue
@@ -6,17 +6,19 @@ const props = withDefaults(
     size?: 'small' | 'medium' | 'large'
     destroyOnClose?: boolean
     maskClosable?: boolean
+    wrapClassName?: string
   }>(),
   {
     size: 'medium',
     destroyOnClose: true,
     maskClosable: true,
+    wrapClassName: '',
   },
 )
 
 const emits = defineEmits(['update:visible'])
 
-const { width: propWidth, destroyOnClose, maskClosable } = props
+const { width: propWidth, destroyOnClose, maskClosable, wrapClassName: _wrapClassName } = props
 
 const { isMobileMode } = useGlobal()
 
@@ -64,6 +66,14 @@ const height = computed(() => {
   return 'auto'
 })
 
+const wrapClassName = computed(() => {
+  let className = 'nc-modal-wrapper'
+  if (_wrapClassName) {
+    className += ` ${_wrapClassName}`
+  }
+  return className
+})
+
 const visible = useVModel(props, 'visible', emits)
 
 const slots = useSlots()
@@ -76,7 +86,7 @@ const slots = useSlots()
     :width="width"
     :centered="true"
     :closable="false"
-    wrap-class-name="nc-modal-wrapper"
+    :wrap-class-name="wrapClassName"
     :footer="null"
     :mask-closable="maskClosable"
     :destroy-on-close="destroyOnClose"