Merge pull request #3101 from nocodb/feat/gui-v2-project-meta-scroll

feat(gui-v2): settings modal overflow

packages/nc-gui-v2/components/dashboard/settings/Metadata.vue

@@ -86,20 +86,22 @@ const columns = [
           </div>
         </a-button>
       </div>
-      <a-table
-        class="w-full"
-        size="small"
-        :custom-row="
-          (record) => ({
-            class: `nc-metasync-row nc-metasync-row-${record.title}`,
-          })
-        "
-        :data-source="metadiff ?? []"
-        :columns="columns"
-        :pagination="false"
-        :loading="isLoading"
-        bordered
-      />
+      <div class="max-h-600px overflow-y-auto">
+        <a-table
+          class="w-full"
+          size="small"
+          :custom-row="
+            (record) => ({
+              class: `nc-metasync-row nc-metasync-row-${record.title}`,
+            })
+          "
+          :data-source="metadiff ?? []"
+          :columns="columns"
+          :pagination="false"
+          :loading="isLoading"
+          bordered
+        />
+      </div>
     </div>
     <div class="flex place-content-center w-2/5">
       <div v-if="isDifferent">
@@ -115,4 +117,4 @@ const columns = [
       </div>
     </div>
   </div>
-</template>
+</template>

packages/nc-gui-v2/components/dashboard/settings/Modal.vue

@@ -149,6 +149,7 @@ watch(
 
 <style scoped>
 .modal-body {
-  @apply min-h-[75vh];
+  @apply h-[75vh];
+  @apply overflow-y-auto;
 }
 </style>

packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue

@@ -120,47 +120,49 @@ const columns = [
           </div>
         </a-button>
       </div>
-      <a-table
-        class="w-full"
-        size="small"
-        :data-source="filteredTables"
-        :columns="columns"
-        :pagination="false"
-        :loading="isLoading"
-        bordered
-        :custom-row="
-          (record) => ({
-            class: `nc-acl-table-row nc-acl-table-row-${record.title}`,
-          })
-        "
-      >
-        <template #bodyCell="{ record, column }">
-          <div v-if="column.name === 'table_name'">{{ record._ptn }}</div>
-          <div v-if="column.name === 'view_name'">
-            <div class="flex align-center">
-              <component :is="viewIcons[record.type].icon" :class="`text-${viewIcons[record.type].color} mr-1`" />
-              {{ record.title }}
+      <div class="max-h-600px overflow-y-auto">
+        <a-table
+          class="w-full"
+          size="small"
+          :data-source="filteredTables"
+          :columns="columns"
+          :pagination="false"
+          :loading="isLoading"
+          bordered
+          :custom-row="
+            (record) => ({
+              class: `nc-acl-table-row nc-acl-table-row-${record.title}`,
+            })
+          "
+        >
+          <template #bodyCell="{ record, column }">
+            <div v-if="column.name === 'table_name'">{{ record._ptn }}</div>
+            <div v-if="column.name === 'view_name'">
+              <div class="flex align-center">
+                <component :is="viewIcons[record.type].icon" :class="`text-${viewIcons[record.type].color} mr-1`" />
+                {{ record.title }}
+              </div>
             </div>
-          </div>
-          <div v-for="role in roles" :key="role">
-            <div v-if="column.name === role">
-              <a-tooltip>
-                <template #title>
-                  <span v-if="record.disabled[role]">
-                    Click to make '{{ record.title }}' visible for role:{{ role }} in UI dashboard</span
-                  >
-                  <span v-else>Click to hide '{{ record.title }}' for role:{{ role }} in UI dashboard</span>
-                </template>
-                <a-checkbox
-                  :checked="!record.disabled[role]"
-                  :class="`nc-acl-${record.title}-${role}-chkbox`"
-                  @change="onRoleCheck(record, role)"
-                ></a-checkbox>
-              </a-tooltip>
+            <div v-for="role in roles" :key="role">
+              <div v-if="column.name === role">
+                <a-tooltip>
+                  <template #title>
+                    <span v-if="record.disabled[role]">
+                      Click to make '{{ record.title }}' visible for role:{{ role }} in UI dashboard</span
+                    >
+                    <span v-else>Click to hide '{{ record.title }}' for role:{{ role }} in UI dashboard</span>
+                  </template>
+                  <a-checkbox
+                    :checked="!record.disabled[role]"
+                    :class="`nc-acl-${record.title}-${role}-chkbox`"
+                    @change="onRoleCheck(record, role)"
+                  ></a-checkbox>
+                </a-tooltip>
+              </div>
             </div>
-          </div>
-        </template>
-      </a-table>
+          </template>
+        </a-table>
+      </div>
     </div>
   </div>
 </template>