fix(nc-gui): add table border in modal

packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue

@@ -474,6 +474,7 @@ async function openAudit(source: SourceType) {
     'sourceId': source!.id,
     'onUpdate:modelValue': () => closeDialog(),
     'baseId': base.value!.id,
+    'bordered': true,
   })
 
   function closeDialog() {

packages/nc-gui/components/dlg/ProjectAudit.vue

@@ -4,13 +4,14 @@ const props = defineProps<{
   baseId: string
   sourceId: string
   modelValue: boolean
+  bordered?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue'])
 
 const isOpen = useVModel(props, 'modelValue', emit)
 
-const { workspaceId, sourceId } = toRefs(props)
+const { workspaceId, sourceId, bordered } = toRefs(props)
 
 const { openedProject: base } = storeToRefs(useBases())
 
@@ -48,7 +49,13 @@ onMounted(async () => {
 <template>
   <GeneralModal v-model:visible="isOpen" size="xl" class="!w-[70rem] !top-[5vh]">
     <div class="p-6 h-full">
-      <WorkspaceAuditLogs v-if="!isLoading" :workspace-id="workspaceId" :source-id="sourceId" :base-id="baseId" />
+      <WorkspaceAuditLogs
+        v-if="!isLoading"
+        :workspace-id="workspaceId"
+        :source-id="sourceId"
+        :base-id="baseId"
+        :bordered="bordered"
+      />
     </div>
   </GeneralModal>
 </template>

packages/nc-gui/components/workspace/AuditLogs.vue

@@ -10,6 +10,7 @@ interface Props {
   workspaceId?: string
   baseId?: string
   sourceId?: string
+  bordered?: boolean
 }
 
 const props = defineProps<Props>()
@@ -189,7 +190,7 @@ const updateOrderBy = (field: 'created_at' | 'user') => {
     auditLogsQuery.value.orderBy[field] = 'asc'
   }
 
-  loadAudits()
+  loadAudits(undefined, undefined, false)
 }
 
 const handleCloseDropdown = (field: 'user' | 'base' | 'type' | 'dateRange') => {
@@ -724,18 +725,19 @@ onMounted(async () => {
     </div>
     <template v-if="appInfo.auditEnabled">
       <div
-        class="relative"
+        class="table-container relative"
         :class="{
           'h-[calc(100%_-_92px)] ': baseId,
           'h-[calc(100%_-_140px)]': !baseId,
+          'bordered': bordered,
         }"
       >
-        <div class="table-wrapper max-h-[calc(100%_-_40px)] overflow-auto nc-scrollbar-thin relative">
+        <div class="table-wrapper h-full max-h-[calc(100%_-_40px)] overflow-auto nc-scrollbar-thin relative">
           <div class="nc-audit-logs-table table h-full relative">
             <div class="thead sticky top-0">
               <div class="tr">
                 <div class="th cell-user !hover:bg-gray-100 select-none cursor-pointer" @click="updateOrderBy('user')">
-                  <div class="flex items-center gap-3">
+                  <div class="flex items-center gap-3 sticky left-0">
                     <div>User</div>
                     <GeneralIcon
                       v-if="auditLogsQuery.orderBy?.user"
@@ -874,7 +876,6 @@ onMounted(async () => {
         >
           <div class="flex justify-between items-center w-full px-6">
             <div>&nbsp;</div>
-            <template v-if="+totalRows > currentLimit">
             <NcPagination
               v-model:current="currentPage"
               v-model:page-size="currentLimit"
@@ -884,7 +885,6 @@ onMounted(async () => {
               @update:current="loadAudits(undefined, undefined, false)"
               @update:page-size="loadAudits(currentPage, $event, false)"
             />
-            </template>
             <div class="text-gray-500 text-xs">{{ totalRows }} {{ totalRows === 1 ? 'record' : 'records' }}</div>
           </div>
         </div>
@@ -996,6 +996,12 @@ onMounted(async () => {
   @apply !w-full;
 }
 
+.table-container {
+  &.bordered {
+    @apply border-1 border-gray-200 rounded-xl overflow-hidden;
+  }
+}
+
 .nc-audit-logs-table {
   .thead {
     .th {