From b59209da9eef12cafc6d2c88bc6d51f9a3521679 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 30 Jul 2022 18:58:22 +0200
Subject: [PATCH] chore(gui-v2): menu style updates

---
 .../nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue    | 4 ++--
 packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
index b5dccbbffc..4ce5db9ca4 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@@ -96,7 +96,7 @@ function onOpenModal(type: ViewTypes, title = '') {
       </a-tooltip>
     </a-menu-item>
 
-    <div class="flex-auto justify-end flex flex-col gap-4 mt-4">
+    <div class="flex-auto justify-end flex flex-col md:gap-4 lg:gap-8 mt-4">
       <button
         class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease"
         @click="onApiSnippet"
@@ -112,7 +112,7 @@ function onOpenModal(type: ViewTypes, title = '') {
       </button>
     </div>
 
-    <general-flipping-card class="my-4 min-h-[100px] w-[250px]" :triggers="['click', { duration: 15000 }]">
+    <general-flipping-card class="my-4 lg:my-6 min-h-[100px] w-[250px]" :triggers="['click', { duration: 15000 }]">
       <template #front>
         <div class="flex h-full w-full gap-6 flex-col">
           <general-social />
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
index ed93cdc8d0..35d0755dc2 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
@@ -158,7 +158,7 @@ function onDeleted() {
     item-key="title"
     handle=".nc-drag-icon"
     :component-data="{
-      class: 'flex-1 max-h-50vh overflow-y-scroll scrollbar-thin-primary',
+      class: 'flex-1 max-h-[50vh] md:max-h-[200px] lg:max-h-[400px] xl:max-h-[600px] overflow-y-scroll scrollbar-thin-primary',
       selectedKeys: selected,
     }"
     @end="onSortEnd"