refactor(gui-v2): overflow view list items

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

@@ -23,6 +23,7 @@ import MdiContentCopy from '~icons/mdi/content-copy'
 import MdiXml from '~icons/mdi/xml'
 import MdiHook from '~icons/mdi/hook'
 import MdiHeartsCard from '~icons/mdi/cards-heart'
+import MdiShieldLockOutline from '~icons/mdi/shield-lock-outline'
 import type { TabItem } from '~/composables/useTabs'
 import { TabType } from '~/composables/useTabs'
 
@@ -296,7 +297,8 @@ function onApiSnippet() {
 
 <template>
   <a-layout-sider class="shadow" :width="toggleDrawer ? 0 : 250">
-    <a-menu class="flex flex-col h-full relative" :selected-keys="selected">
+    <div class="flex flex-col h-full">
+      <a-menu class="min-h-[250px] overflow-y-scroll scrollbar-thin-primary" :selected-keys="selected">
         <h3 class="pt-3 px-3 text-xs font-semibold">{{ $t('objects.views') }}</h3>
 
         <a-menu-item
@@ -349,10 +351,20 @@ function onApiSnippet() {
             </template>
           </div>
         </a-menu-item>
+      </a-menu>
 
+      <a-menu class="flex-1 flex flex-col">
         <a-divider class="my-2" />
 
-      <h3 class="px-3 text-xs font-semibold">{{ $t('activity.createView') }}</h3>
+        <h3 class="px-3 text-xs font-semibold flex items-center gap-4">
+          {{ $t('activity.createView') }}
+          <a-tooltip>
+            <template #title>
+              {{ $t('msg.info.onlyCreator') }}
+            </template>
+            <MdiShieldLockOutline class="text-pink-500" />
+          </a-tooltip>
+        </h3>
 
         <a-menu-item key="grid" class="group !flex !items-center !h-[30px]" @click="openModal(ViewTypes.GRID)">
           <a-tooltip placement="left">
@@ -408,7 +420,7 @@ function onApiSnippet() {
           </a-tooltip>
         </a-menu-item>
 
-      <div class="flex-auto justify-end flex flex-col gap-4 mt-8">
+        <div class="justify-end flex flex-col gap-4">
           <button
             class="flex items-center gap-2 w-full mx-3 p-4 rounded !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease"
             @click="onApiSnippet"
@@ -457,6 +469,7 @@ function onApiSnippet() {
           </template>
         </general-flipping-card>
       </a-menu>
+    </div>
 
     <dlg-view-create v-if="views" v-model="modalOpen" :title="viewCreateTitle" :type="viewCreateType" @created="onCreate" />
   </a-layout-sider>