From 6c01e5df4f0ca8c748a9f14e62505f7979fec1e3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 17 May 2024 09:35:49 +0000
Subject: [PATCH] refactor: scrollbar and other padding corrections

---
 .../dashboard/settings/DataSources.vue        | 24 +++++++++++--------
 .../components/dashboard/settings/Modal.vue   | 19 ++++++++-------
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 1a90cbe0da..ca3590b035 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -282,7 +282,7 @@ const openedTab = ref('erd')
         </div>
       </NcButton>
     </div>
-    <div data-testid="nc-settings-datasources" class="flex flex-row w-full h-full nc-data-sources-view flex-grow">
+    <div data-testid="nc-settings-datasources" class="flex flex-row w-full nc-data-sources-view flex-grow min-h-0">
       <template v-if="activeSource">
         <NcTabs v-model:activeKey="openedTab" class="nc-source-tab w-full">
           <a-tab-pane key="erd">
@@ -291,8 +291,8 @@ const openedTab = ref('erd')
                 <div>{{ $t('title.erdView') }}</div>
               </div>
             </template>
-            <div class="h-[300vh]">
-              <LazyDashboardSettingsErd class="mt-4 overflow-scroll" :source-id="activeSource.id" :show-all-columns="false" />
+            <div class="h-full pt-4">
+              <LazyDashboardSettingsErd class="h-full overflow-auto" :source-id="activeSource.id" :show-all-columns="false" />
             </div>
           </a-tab-pane>
           <a-tab-pane v-if="activeSource.is_meta || activeSource.is_local" key="audit">
@@ -301,8 +301,9 @@ const openedTab = ref('erd')
                 <div>{{ $t('title.auditLogs') }}</div>
               </div>
             </template>
-
-            <LazyDashboardSettingsBaseAudit class="mt-4" :source-id="activeSource.id" />
+            <div class="p-4 h-full overflow-auto">
+              <LazyDashboardSettingsBaseAudit :source-id="activeSource.id" />
+            </div>
           </a-tab-pane>
           <a-tab-pane v-if="!activeSource.is_meta && !activeSource.is_local" key="audit">
             <template #tab>
@@ -310,7 +311,7 @@ const openedTab = ref('erd')
                 <div>{{ $t('labels.connectionDetails') }}</div>
               </div>
             </template>
-            <div class="p-6 mt-4 flex">
+            <div class="p-6 mt-4 flex h-full">
               <LazyDashboardSettingsDataSourcesEditBase
                 class="w-600px"
                 :source-id="activeSource.id"
@@ -336,7 +337,6 @@ const openedTab = ref('erd')
             </template>
             <LazyDashboardSettingsMetadata class="mt-4 w-full" :source-id="activeSource.id" @source-synced="loadBases(true)" />
           </a-tab-pane>
-
         </NcTabs>
       </template>
       <div v-else class="flex flex-col w-full overflow-auto mt-1">
@@ -480,7 +480,7 @@ const openedTab = ref('erd')
   </div>
 </template>
 
-<style>
+<style scoped lang="scss">
 .ds-table-head {
   @apply flex items-center border-0 text-gray-500;
 }
@@ -524,7 +524,11 @@ const openedTab = ref('erd')
   @apply bg-gray-50/60;
 }
 
-:deep(.ant-tabs-content){
-  @apply !h-full !overflow-auto;
+:deep(.ant-tabs-content),
+:deep(.ant-tabs) {
+  @apply !h-full;
+}
+:deep(.ant-tabs-content-holder) {
+  @apply !min-h-0 !flex-shrink;
 }
 </style>
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index 79bee46666..e5badfde59 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { FunctionalComponent, SVGAttributes } from 'vue'
-import DataSources from '~/components/dashboard/settings/DataSources.vue'
 import Misc from './Misc.vue'
+import DataSources from '~/components/dashboard/settings/DataSources.vue'
 
 interface Props {
   modelValue?: boolean
@@ -156,12 +156,11 @@ watch(
     :footer="null"
     width="max(90vw, 600px)"
     :closable="false"
+    class="!top-50px !bottom-50px"
     wrap-class-name="nc-modal-settings"
     @cancel="emits('update:modelValue', false)"
   >
-         <div class="min-h-[75vh]">
-
-  <!--    Settings -->
+    <!--    Settings -->
     <div class="flex flex-row justify-between w-full items-center mb-1">
       <a-typography-title class="ml-4 select-none" type="secondary" :level="5">
         {{ $t('activity.settings') }}
@@ -194,7 +193,7 @@ watch(
       </a-layout-sider>
 
       <!-- Sub Tabs -->
-      <a-layout-content class="h-auto px-4 scrollbar-thumb-gray-500">
+      <a-layout-content class="h-auto h-80vh px-4 scrollbar-thumb-gray-500">
         <a-menu
           v-if="selectedTabKeys[0] !== 'dataSources'"
           v-model:selectedKeys="selectedSubTabKeys"
@@ -211,13 +210,18 @@ watch(
           </a-menu-item>
         </a-menu>
 
-        <div class="h-[600px]">
+        <div
+          class="overflow-auto"
+          :class="{
+            'h-full': selectedSubTabKeys[0] === 'dataSources',
+          }"
+        >
           <component
             :is="selectedSubTab?.body"
             v-if="selectedSubTabKeys[0] === 'dataSources'"
             v-model:state="vDataState"
             v-model:reload="dataSourcesReload"
-            class="px-2 pb-2"
+            class="px-2 pb-2 h-full"
             :data-testid="`nc-settings-subtab-${selectedSubTab.key}`"
             :base-id="baseId"
           />
@@ -231,7 +235,6 @@ watch(
         </div>
       </a-layout-content>
     </a-layout>
-  </div>
   </a-modal>
 </template>