From d811955c0f4afb053dc8303adc67ad97dd18a4a0 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 22 May 2024 04:59:25 +0000
Subject: [PATCH 1/3] fix(nc-gui): expanded form comment & audit tab flickering
 issue

---
 .../nc-gui/components/smartsheet/expanded-form/Comments.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
index 30e73d2dad..f152e53541 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
@@ -389,7 +389,7 @@ watch(commentsWrapperEl, () => {
   .ant-tabs-nav {
     @apply px-3;
     .ant-tabs-nav-list {
-      @apply w-full gap-6;
+      @apply w-[99%] mx-auto gap-6;
 
       .ant-tabs-tab {
         @apply flex-1 flex items-center justify-center pt-3 pb-2.5;

From b0f482801aab025aa03e4f21e2d8fd0e449613ec Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 22 May 2024 04:59:25 +0000
Subject: [PATCH 2/3] fix(nc-gui): audit table overflow issue

---
 .../dashboard/settings/BaseAudit.vue          | 29 +++++++++++++++++--
 .../dashboard/settings/DataSources.vue        |  2 +-
 .../dashboard/settings/Metadata.vue           | 28 ++++++++++++++++--
 .../components/dashboard/settings/UIAcl.vue   |  2 +-
 .../nc-gui/components/dlg/ProjectAudit.vue    |  2 +-
 packages/nc-gui/components/general/Modal.vue  |  2 +-
 6 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/BaseAudit.vue b/packages/nc-gui/components/dashboard/settings/BaseAudit.vue
index 873b9d07d6..f6bcdfc9b6 100644
--- a/packages/nc-gui/components/dashboard/settings/BaseAudit.vue
+++ b/packages/nc-gui/components/dashboard/settings/BaseAudit.vue
@@ -103,7 +103,7 @@ const columns = [
 </script>
 
 <template>
-  <div class="flex flex-col gap-4 w-full">
+  <div class="h-full flex flex-col gap-4 w-full">
     <div v-if="!appInfo.auditEnabled" class="text-red-500">Audit logs are currently disabled by administrators.</div>
     <div class="flex flex-row justify-between items-center">
       <h6 class="mb-4 first-letter:capital font-bold">Audit : {{ base.title }}</h6>
@@ -129,7 +129,7 @@ const columns = [
         <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
       </template>
     </a-table>
-    <div class="flex flex-row justify-center items-center">
+    <div v-if="+totalRows > currentLimit" class="flex flex-row justify-center items-center">
       <a-pagination
         v-model:current="currentPage"
         v-model:page-size="currentLimit"
@@ -151,6 +151,31 @@ const columns = [
   font-size: unset;
   font-family: unset;
 }
+
+:deep(.nc-audit-table) {
+  @apply h-[calc(100%_-_102px)];
+
+  .ant-spin-nested-loading,
+  .ant-spin-container,
+  .ant-table,
+  .ant-table-container,
+  table {
+    @apply !h-full;
+  }
+  .ant-table-thead {
+    @apply sticky top-0 w-full z-10;
+  }
+  .ant-table-content {
+    @apply !h-auto max-h-full overflow-auto nc-scrollbar-thin;
+
+    tr {
+      height: auto !important;
+    }
+  }
+  pre {
+    @apply mb-0;
+  }
+}
 .pagination {
   .ant-select-dropdown {
     @apply !border-1 !border-gray-200;
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 721fedda6e..6c563c1488 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -303,7 +303,7 @@ const openedTab = ref('erd')
                 <div>{{ $t('title.auditLogs') }}</div>
               </div>
             </template>
-            <div class="p-4 h-full overflow-auto">
+            <div class="p-4 h-full">
               <LazyDashboardSettingsBaseAudit :source-id="activeSource.id" />
             </div>
           </a-tab-pane>
diff --git a/packages/nc-gui/components/dashboard/settings/Metadata.vue b/packages/nc-gui/components/dashboard/settings/Metadata.vue
index 604eba5103..12c646f9e6 100644
--- a/packages/nc-gui/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui/components/dashboard/settings/Metadata.vue
@@ -140,9 +140,9 @@ const columns = [
           </div>
         </a-button>
       </div>
-      <div class="max-h-600px overflow-y-auto">
+      <div class="h-auto max-h-600px">
         <a-table
-          class="w-full"
+          class="nc-metasync-table w-full"
           size="small"
           :custom-row="
             (record) => ({
@@ -178,3 +178,27 @@ const columns = [
     </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+:deep(.nc-metasync-table) {
+  @apply !h-[calc(100%_-_102px)];
+
+  .ant-spin-nested-loading,
+  .ant-spin-container,
+  .ant-table,
+  .ant-table-container,
+  table {
+    @apply !h-full;
+  }
+  .ant-table-thead {
+    @apply sticky top-0 w-full z-10;
+  }
+  .ant-table-content {
+    @apply !h-auto max-h-full overflow-auto nc-scrollbar-thin;
+
+    tr {
+      height: auto !important;
+    }
+  }
+}
+</style>
diff --git a/packages/nc-gui/components/dashboard/settings/UIAcl.vue b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
index 711f116685..b7afb980d7 100644
--- a/packages/nc-gui/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
@@ -159,7 +159,7 @@ const toggleSelectAll = (role: Role) => {
         </div>
       </div>
 
-      <div class="max-h-600px overflow-y-auto">
+      <div class="max-h-600px overflow-y-auto nc-scrollbar-thin">
         <a-table
           class="w-full"
           size="small"
diff --git a/packages/nc-gui/components/dlg/ProjectAudit.vue b/packages/nc-gui/components/dlg/ProjectAudit.vue
index 58d67193b8..daa1d40ec2 100644
--- a/packages/nc-gui/components/dlg/ProjectAudit.vue
+++ b/packages/nc-gui/components/dlg/ProjectAudit.vue
@@ -46,7 +46,7 @@ onMounted(async () => {
 
 <template>
   <GeneralModal v-model:visible="isOpen" size="large" class="!w-[70rem]">
-    <div class="p-6">
+    <div class="p-6 h-full">
       <DashboardSettingsBaseAudit v-if="!isLoading" :source-id="activeSourceId" :base-id="baseId" :show-all-columns="false" />
     </div>
   </GeneralModal>
diff --git a/packages/nc-gui/components/general/Modal.vue b/packages/nc-gui/components/general/Modal.vue
index 069559f70f..7de106c497 100644
--- a/packages/nc-gui/components/general/Modal.vue
+++ b/packages/nc-gui/components/general/Modal.vue
@@ -75,7 +75,7 @@ const visible = useVModel(props, 'visible', emits)
     :mask-closable="maskClosable"
     @keydown.esc="visible = false"
   >
-    <div :class="`nc-modal max-h-[${height}]`">
+    <div :class="`nc-modal h-[${height}] max-h-[${height}]`">
       <slot />
     </div>
   </a-modal>

From 73a4c3187229d6da32a041fc9461467c49eb6999 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 22 May 2024 04:59:25 +0000
Subject: [PATCH 3/3] fix(nc-gui): audit, meta sync table issue

---
 .../dashboard/settings/BaseAudit.vue          | 54 ++++++-------------
 .../dashboard/settings/DataSources.vue        |  4 +-
 .../dashboard/settings/Metadata.vue           | 31 ++---------
 .../components/dashboard/settings/UIAcl.vue   |  6 +--
 .../nc-gui/components/dlg/ProjectAudit.vue    |  2 +-
 packages/nc-gui/components/general/Modal.vue  |  9 +++-
 6 files changed, 36 insertions(+), 70 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/BaseAudit.vue b/packages/nc-gui/components/dashboard/settings/BaseAudit.vue
index f6bcdfc9b6..e16ca16ca4 100644
--- a/packages/nc-gui/components/dashboard/settings/BaseAudit.vue
+++ b/packages/nc-gui/components/dashboard/settings/BaseAudit.vue
@@ -116,19 +116,23 @@ const columns = [
       </a-button>
     </div>
 
-    <a-table
-      class="nc-audit-table w-full"
-      size="small"
-      :data-source="audits ?? []"
-      :columns="columns"
-      :pagination="false"
-      :loading="isLoading"
-      data-testid="audit-tab-table"
-    >
-      <template #emptyText>
-        <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
-      </template>
-    </a-table>
+    <div class="h-[calc(100%_-_102px)] overflow-y-auto nc-scrollbar-thin">
+      <a-table
+        class="nc-audit-table w-full"
+        size="small"
+        :data-source="audits ?? []"
+        :columns="columns"
+        :pagination="false"
+        :loading="isLoading"
+        data-testid="audit-tab-table"
+        sticky
+        bordered
+      >
+        <template #emptyText>
+          <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
+        </template>
+      </a-table>
+    </div>
     <div v-if="+totalRows > currentLimit" class="flex flex-row justify-center items-center">
       <a-pagination
         v-model:current="currentPage"
@@ -152,30 +156,6 @@ const columns = [
   font-family: unset;
 }
 
-:deep(.nc-audit-table) {
-  @apply h-[calc(100%_-_102px)];
-
-  .ant-spin-nested-loading,
-  .ant-spin-container,
-  .ant-table,
-  .ant-table-container,
-  table {
-    @apply !h-full;
-  }
-  .ant-table-thead {
-    @apply sticky top-0 w-full z-10;
-  }
-  .ant-table-content {
-    @apply !h-auto max-h-full overflow-auto nc-scrollbar-thin;
-
-    tr {
-      height: auto !important;
-    }
-  }
-  pre {
-    @apply mb-0;
-  }
-}
 .pagination {
   .ant-select-dropdown {
     @apply !border-1 !border-gray-200;
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 6c563c1488..ca1a0bde0b 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -330,7 +330,7 @@ const openedTab = ref('erd')
               </div>
             </template>
 
-            <div class="pt-4 h-full overflow-auto">
+            <div class="pt-4 h-full">
               <LazyDashboardSettingsUIAcl :source-id="activeSource.id" />
             </div>
           </a-tab-pane>
@@ -340,7 +340,7 @@ const openedTab = ref('erd')
                 <div>{{ $t('labels.metaSync') }}</div>
               </div>
             </template>
-            <div class="pt-4 h-full overflow-auto">
+            <div class="pt-4 h-full">
               <LazyDashboardSettingsMetadata :source-id="activeSource.id" @source-synced="loadBases(true)" />
             </div>
           </a-tab-pane>
diff --git a/packages/nc-gui/components/dashboard/settings/Metadata.vue b/packages/nc-gui/components/dashboard/settings/Metadata.vue
index 12c646f9e6..7fc4dbc05b 100644
--- a/packages/nc-gui/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui/components/dashboard/settings/Metadata.vue
@@ -108,8 +108,8 @@ const columns = [
 </script>
 
 <template>
-  <div class="flex flex-col w-full">
-    <div class="flex flex-col">
+  <div class="h-full flex flex-col w-full">
+    <div class="h-full flex flex-col">
       <div class="flex flex-row justify-between items-center w-full mb-4">
         <div class="flex">
           <div v-if="isDifferent">
@@ -140,7 +140,7 @@ const columns = [
           </div>
         </a-button>
       </div>
-      <div class="h-auto max-h-600px">
+      <div class="h-auto max-h-[calc(100%_-_72px)] overflow-y-auto nc-scrollbar-thin">
         <a-table
           class="nc-metasync-table w-full"
           size="small"
@@ -153,6 +153,7 @@ const columns = [
           :columns="columns"
           :pagination="false"
           :loading="isLoading"
+          sticky
           bordered
         >
           <template #emptyText>
@@ -179,26 +180,4 @@ const columns = [
   </div>
 </template>
 
-<style lang="scss" scoped>
-:deep(.nc-metasync-table) {
-  @apply !h-[calc(100%_-_102px)];
-
-  .ant-spin-nested-loading,
-  .ant-spin-container,
-  .ant-table,
-  .ant-table-container,
-  table {
-    @apply !h-full;
-  }
-  .ant-table-thead {
-    @apply sticky top-0 w-full z-10;
-  }
-  .ant-table-content {
-    @apply !h-auto max-h-full overflow-auto nc-scrollbar-thin;
-
-    tr {
-      height: auto !important;
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/nc-gui/components/dashboard/settings/UIAcl.vue b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
index b7afb980d7..5b876ddec9 100644
--- a/packages/nc-gui/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui/components/dashboard/settings/UIAcl.vue
@@ -130,8 +130,8 @@ const toggleSelectAll = (role: Role) => {
 </script>
 
 <template>
-  <div class="flex flex-row w-full items-center justify-center">
-    <div class="flex flex-col">
+  <div class="h-full flex flex-row w-full items-center justify-center">
+    <div class="h-full flex flex-col">
       <NcTooltip class="mb-4 first-letter:capital font-bold max-w-100 truncate" show-on-truncate-only>
         <template #title>{{ base.title }}</template>
         <span> UI ACL : {{ base.title }} </span>
@@ -159,7 +159,7 @@ const toggleSelectAll = (role: Role) => {
         </div>
       </div>
 
-      <div class="max-h-600px overflow-y-auto nc-scrollbar-thin">
+      <div class="h-auto max-h-[calc(100%_-_102px)] overflow-y-auto nc-scrollbar-thin">
         <a-table
           class="w-full"
           size="small"
diff --git a/packages/nc-gui/components/dlg/ProjectAudit.vue b/packages/nc-gui/components/dlg/ProjectAudit.vue
index daa1d40ec2..daea9f04e5 100644
--- a/packages/nc-gui/components/dlg/ProjectAudit.vue
+++ b/packages/nc-gui/components/dlg/ProjectAudit.vue
@@ -45,7 +45,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <GeneralModal v-model:visible="isOpen" size="large" class="!w-[70rem]">
+  <GeneralModal v-model:visible="isOpen" size="xl" class="!w-[70rem] !top-[5vh]">
     <div class="p-6 h-full">
       <DashboardSettingsBaseAudit v-if="!isLoading" :source-id="activeSourceId" :base-id="baseId" :show-all-columns="false" />
     </div>
diff --git a/packages/nc-gui/components/general/Modal.vue b/packages/nc-gui/components/general/Modal.vue
index 7de106c497..28279420ed 100644
--- a/packages/nc-gui/components/general/Modal.vue
+++ b/packages/nc-gui/components/general/Modal.vue
@@ -3,7 +3,7 @@ const props = withDefaults(
   defineProps<{
     visible: boolean
     width?: string | number
-    size?: 'small' | 'medium' | 'large'
+    size?: 'small' | 'medium' | 'large' | 'xl'
     destroyOnClose?: boolean
     maskClosable?: boolean
     closable?: boolean
@@ -40,6 +40,10 @@ const width = computed(() => {
     return '80rem'
   }
 
+  if (props.size === 'xl') {
+    return '80rem'
+  }
+
   return 'max(30vw, 600px)'
 })
 
@@ -55,6 +59,9 @@ const height = computed(() => {
   if (props.size === 'large') {
     return '80vh'
   }
+  if (props.size === 'xl') {
+    return '90vh'
+  }
 
   return 'auto'
 })