fix(nc-gui): audit table overflow issue

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;

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>

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>

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"

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>

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>