refactor(gui-v2): ui corrections

Signed-off-by: Pranav C <pranavxc@gmail.com>

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

@@ -208,7 +208,7 @@ const addTableTab = (table: TableType) => {
     </div>
 
     <a-dropdown :trigger="['contextmenu']">
-      <div class="p-1 flex-1 overflow-y-auto flex flex-column">
+      <div class="p-1 flex-1 overflow-y-auto flex flex-column scrollbar-thin-primary">
         <div
           class="py-1 px-3 flex w-full align-center gap-1 cursor-pointer"
           @click="showTableList = !showTableList"

packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue

@@ -19,23 +19,24 @@ const applyChanges = () => {}
   <v-menu offset-y eager transition="slide-y-transition">
     <template #activator="{ props }">
       <v-badge :value="filters.length" color="primary" dot overlap>
-        <v-btn
+        <a-button
           v-t="['c:filter']"
           class="nc-filter-menu-btn px-2 nc-remove-border"
           :disabled="isLocked"
           outlined
-          small
+          size="small"
           text
           :class="{
             'primary lighten-5 grey--text text--darken-3': filters.length,
           }"
           v-bind="props"
-        >
-          <MdiFilterIcon class="mr-1 text-grey" />
+          ><div class="flex align-center gap-1 text-sm">
+            <MdiFilterIcon class="text-grey" />
             <!-- Filter -->
             <span class="text-capitalize">{{ $t('activity.filter') }}</span>
             <MdiMenuDownIcon class="text-grey" />
-        </v-btn>
+          </div>
+        </a-button>
       </v-badge>
     </template>
     <SmartsheetToolbarColumnFilter>

packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@@ -315,23 +315,24 @@ export default {
   <v-menu>
     <template #activator="{ props }">
       <v-badge :value="isAnyFieldHidden" color="primary" dot overlap v-bind="props">
-        <v-btn
+        <a-button
           v-t="['c:fields']"
           class="nc-fields-menu-btn px-2 nc-remove-border"
           :disabled="isLocked"
           outlined
-          small
+          size="small"
           text
           :class="{
             'primary lighten-5 grey--text text--darken-3': isAnyFieldHidden,
           }"
-        >
+          ><div class="flex align-center gap-1 text-sm">
             <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
-          <MdiEyeIcon class="mr-1 text-grey"></MdiEyeIcon>
+            <MdiEyeIcon class="text-grey"></MdiEyeIcon>
             <!-- Fields -->
-          <span class="text-sm text-capitalize">{{ $t('objects.fields') }}</span>
+            <span class="text-capitalize">{{ $t('objects.fields') }}</span>
             <MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon>
-        </v-btn>
+          </div>
+        </a-button>
       </v-badge>
     </template>
 

packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue

@@ -29,8 +29,9 @@ watch(
   <v-menu offset-y transition="slide-y-transition">
     <template #activator="{ props }">
       <v-badge :value="sorts && sorts.length" color="primary" dot overlap>
-        <v-btn
+        <a-button
           v-t="['c:sort']"
+          size="small"
           class="nc-sort-menu-btn px-2 nc-remove-border"
           :disabled="isLocked"
           small
@@ -40,12 +41,13 @@ watch(
             'primary lighten-5 grey&#45;&#45;text text&#45;&#45;darken-3': sorts && sorts.length,
           }"
           v-bind="props"
-        >
-          <MdiSortIcon class="mr-1 text-grey" />
+          ><div class="flex align-center gap-1 text-sm">
+            <MdiSortIcon class="text-grey" />
             <!-- Sort -->
             <span class="text-capitalize">{{ $t('activity.sort') }}</span>
             <MdiMenuDownIcon class="text-grey" />
-        </v-btn>
+          </div>
+        </a-button>
       </v-badge>
     </template>
     <div class="backgroundColor pa-2 menu-filter-dropdown bg-background min-w-[400px]">

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -65,7 +65,8 @@ defineExpose({
 </script>
 
 <template>
-  <div class="nc-grid-wrapper">
+  <div class="flex flex-col h-100 min-h-0 w-100">
+    <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-primary">
       <table class="xc-row-table nc-grid backgroundColorDefault">
         <thead>
           <tr>
@@ -188,6 +189,7 @@ defineExpose({
       </table>
     </div>
     <SmartsheetPagination />
+  </div>
 </template>
 
 <style scoped lang="scss">

packages/nc-gui-v2/components/smartsheet/Pagination.vue

@@ -48,7 +48,7 @@ export default {
   <div class="d-flex align-center">
     <span v-if="count !== null && count !== Infinity" class="caption ml-2"> {{ count }} record{{ count !== 1 ? 's' : '' }} </span>
     <v-spacer />
-    <v-pagination
+    <!--    <v-pagination
       v-if="count !== Infinity"
       v-model="page"
       style="max-width: 100%"
@@ -56,6 +56,17 @@ export default {
       :total-visible="8"
       color="primary lighten-2"
       class="nc-pagination"
+    /> -->
+
+    <a-pagination
+      v-if="count !== Infinity"
+      v-model:current="page"
+      size="small"
+      class="!text-xs !m-1"
+      :total="count"
+      :page-size="size"
+      show-less-items
+      :show-size-changer="false"
     />
     <div v-else class="mx-auto d-flex align-center mt-n1" style="max-width: 250px">
       <span class="caption" style="white-space: nowrap"> Change page:</span>
@@ -79,3 +90,10 @@ export default {
     <v-spacer />
   </div>
 </template>
+
+<style scoped>
+:deep(.ant-pagination-item a) {
+  line-height: 21px !important;
+  @apply text-sm;
+}
+</style>

packages/nc-gui-v2/components/tabs/Smartsheet.vue

@@ -37,17 +37,21 @@ watch(
 </script>
 
 <template>
-  <div class="overflow-auto nc-container">
+  <div class="nc-container flex h-full">
+    <div class="flex flex-col h-full flex-1 min-w-0">
       <SmartsheetToolbar />
       <template v-if="meta">
-      <div class="d-flex">
-        <div v-if="activeView" class="flex-grow-1 min-w-0">
+        <div class="flex flex-1 min-h-0">
+          <div v-if="activeView" class="h-full flex-grow min-w-0 min-h-0">
             <SmartsheetGrid v-if="activeView.type === ViewTypes.GRID" :ref="el" />
             <SmartsheetGallery v-else-if="activeView.type === ViewTypes.GALLERY" />
             <SmartsheetForm v-else-if="activeView.type === ViewTypes.FORM" />
           </div>
-        <SmartsheetSidebar />
         </div>
       </template>
     </div>
+    <template v-if="meta">
+      <SmartsheetSidebar />
+    </template>
+  </div>
 </template>

packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue

@@ -15,7 +15,7 @@ provide(TabMetaInj, activeTab)
         <a-tab-pane v-for="(tab, i) in tabs" :key="i" :tab="tab.title" />
       </a-tabs>
     </div>
-    <div class="flex-1">
+    <div class="flex-1 min-h-0">
       <NuxtPage />
     </div>
   </div>
@@ -23,7 +23,8 @@ provide(TabMetaInj, activeTab)
 
 <style scoped>
 .nc-container {
-  height: calc(100vh - var(--header-height));
+  height: calc(calc(100vh - var(--header-height)));
+  @apply overflow-hidden;
 }
 
 :deep(.ant-tabs-nav) {