From f3ef73cf503b46a5b4a6d9c81ed6cf5901d258ab Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Sat, 7 Oct 2023 16:55:47 +0530
Subject: [PATCH] fix: scrollbar behavior

---
 packages/nc-gui/components/account/Token.vue  | 75 ++++++++++---------
 .../nc-gui/components/account/UserList.vue    | 29 ++++---
 packages/nc-gui/lang/en.json                  |  1 +
 3 files changed, 58 insertions(+), 47 deletions(-)

diff --git a/packages/nc-gui/components/account/Token.vue b/packages/nc-gui/components/account/Token.vue
index 0a22aae93b..9be51ad5e0 100644
--- a/packages/nc-gui/components/account/Token.vue
+++ b/packages/nc-gui/components/account/Token.vue
@@ -185,16 +185,22 @@ const handleCancel = () => {
         </NcTooltip>
       </div>
       <span>{{ $t('msg.apiTokenCreate') }}</span>
-      <div class="w-full mt-5 overflow-hidden rounded-md h-[calc(100%-18.5rem)] border-1">
-        <div class="flex w-full pl-5 bg-gray-50">
+      <div class="w-full mt-5 !overflow-hidden rounded-md h-[calc(100%-17.5rem)]">
+        <div class="flex w-full pl-5 bg-gray-50 border-1 border-b-0">
           <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9">{{ $t('title.tokenName') }}</span>
           <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9 text-start">{{ $t('title.creator') }}</span>
           <span class="py-3.5 text-gray-500 font-medium text-3.5 w-3/9 text-start">{{ $t('labels.token') }}</span>
           <span class="py-3.5 pl-19 text-gray-500 font-medium text-3.5 w-2/9 text-start">{{ $t('labels.actions') }}</span>
         </div>
-        <div class="nc-scrollbar-md !overflow-y-auto h-[calc(100%-3rem)]">
+        <div class="nc-scrollbar-md !overflow-y-auto h-[calc(100%-3rem)] border-b-1">
           <div v-if="showNewTokenModal">
-            <div class="flex gap-5 px-3 py-3.5 text-gray-500 font-medium text-3.5 w-full nc-token-generate border-t-1">
+            <div
+              class="flex gap-5 px-3 py-3.5 text-gray-500 font-medium text-3.5 w-full nc-token-generate border-1"
+              :class="{
+                'border-b-1': !tokens.length,
+                'border-b-0': tokens.length,
+              }"
+            >
               <div class="flex flex-col w-full">
                 <a-input
                   :ref="selectInputOnMount"
@@ -218,15 +224,15 @@ const handleCancel = () => {
               </div>
             </div>
           </div>
-          <div v-if="showNewTokenModal && !tokens.length" class="h-118 justify-center flex items-center">
-            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('title.noLabels')" />
+          <div v-if="!tokens.length && !showNewTokenModal" class="justify-center flex items-center border-1">
+            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noToken')" />
           </div>
 
           <div
             v-for="el of tokens"
             :key="el.id"
             data-testid="nc-token-list"
-            class="flex border-t-1 pl-5 py-3 justify-between token"
+            class="flex border-1 pl-5 py-3 justify-between token"
           >
             <span class="text-black font-bold text-3.5 text-start w-2/9">
               <GeneralTruncateText placement="top" length="20">
@@ -242,34 +248,32 @@ const handleCancel = () => {
               <GeneralTruncateText v-if="el.token === selectedToken.id && selectedToken.isShow" placement="top" length="29">
                 {{ el.token }}
               </GeneralTruncateText>
-              <span v-else>**************************************</span>
+              <span v-else>************************************</span>
             </span>
             <!-- ACTIONS -->
-            <span class="text-gray-500 font-medium text-3.5 w-2/9">
-              <div class="flex justify-end items-center gap-3 pr-5">
-                <NcTooltip placement="top">
-                  <template #title>{{ $t('labels.showOrHide') }}</template>
-                  <component
-                    :is="iconMap.eye"
-                    class="nc-toggle-token-visibility hover::cursor-pointer"
-                    @click="hideOrShowToken(el.token as string)"
-                  />
-                </NcTooltip>
-                <NcTooltip placement="top" class="h-4">
-                  <template #title>{{ $t('general.copy') }}</template>
-                  <component :is="iconMap.copy" class="hover::cursor-pointer" @click="copyToken(el.token)" />
-                </NcTooltip>
-                <NcTooltip placement="top" class="mb-0.5">
-                  <template #title>{{ $t('general.delete') }}</template>
-                  <component
-                    :is="iconMap.delete"
-                    data-testid="nc-token-row-action-icon"
-                    class="nc-delete-icon hover::cursor-pointer"
-                    @click="triggerDeleteModal(el.token as string, el.description as string)"
-                  />
-                </NcTooltip>
-              </div>
-            </span>
+            <div class="flex justify-end items-center gap-3 pr-5 text-gray-500 font-medium text-3.5 w-2/9">
+              <NcTooltip placement="top">
+                <template #title>{{ $t('labels.showOrHide') }}</template>
+                <component
+                  :is="iconMap.eye"
+                  class="nc-toggle-token-visibility hover::cursor-pointer w-h-4 mb-[1.8px]"
+                  @click="hideOrShowToken(el.token as string)"
+                />
+              </NcTooltip>
+              <NcTooltip placement="top" class="h-4">
+                <template #title>{{ $t('general.copy') }}</template>
+                <component :is="iconMap.copy" class="hover::cursor-pointer w-4 h-4" @click="copyToken(el.token)" />
+              </NcTooltip>
+              <NcTooltip placement="top" class="mb-0.5">
+                <template #title>{{ $t('general.delete') }}</template>
+                <component
+                  :is="iconMap.delete"
+                  data-testid="nc-token-row-action-icon"
+                  class="nc-delete-icon hover::cursor-pointer w-4 h-4"
+                  @click="triggerDeleteModal(el.token as string, el.description as string)"
+                />
+              </NcTooltip>
+            </div>
           </div>
         </div>
       </div>
@@ -304,8 +308,9 @@ const handleCancel = () => {
     </GeneralDeleteModal>
   </div>
 </template>
-<style lang="scss" scoped>
+
+<style>
 .token:last-child {
-  @apply border-b-1;
+  @apply rounded-b-md;
 }
 </style>
diff --git a/packages/nc-gui/components/account/UserList.vue b/packages/nc-gui/components/account/UserList.vue
index b50ab7dd0b..b9082d5b8e 100644
--- a/packages/nc-gui/components/account/UserList.vue
+++ b/packages/nc-gui/components/account/UserList.vue
@@ -185,7 +185,7 @@ const openDeleteModal = (user: UserType) => {
         <div v-else-if="!users.length" class="flex items-center justify-center text-center h-full">
           <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
         </div>
-        <section v-else class="tbody h-[calc(100%-3.3rem)] nc-scrollbar-md border-t-0">
+        <section v-else class="tbody h-[calc(100%-3rem)] nc-scrollbar-md border-t-0 !overflow-auto">
           <div
             v-for="el of users"
             :key="el.id"
@@ -195,12 +195,14 @@ const openDeleteModal = (user: UserType) => {
               'py-4': el.roles?.includes('super'),
             }"
           >
-            <span class="text-3.5 text-start w-1/3 pl-5">
-              {{ el.email }}
+            <span class="text-3.5 text-start w-1/3 pl-5 flex items-center">
+              <GeneralTruncateText length="29">
+                {{ el.email }}
+              </GeneralTruncateText>
             </span>
             <span class="text-3.5 text-start w-1/3 pl-18">
               <div v-if="el?.roles?.includes('super')" class="font-weight-bold">{{ $t('labels.superAdmin') }}</div>
-              <a-select
+              <NcSelect
                 v-else
                 v-model:value="el.roles"
                 class="w-55 nc-user-roles"
@@ -228,9 +230,9 @@ const openDeleteModal = (user: UserType) => {
                     {{ $t('msg.info.roles.orgViewer') }}
                   </span>
                 </a-select-option>
-              </a-select>
+              </NcSelect>
             </span>
-            <span class="w-1/3 pl-43">
+            <span class="w-1/3 pl-43 flex items-center">
               <div
                 class="flex items-center gap-2"
                 :class="{
@@ -238,23 +240,26 @@ const openDeleteModal = (user: UserType) => {
                 }"
               >
                 <NcDropdown :trigger="['click']">
-                  <MdiDotsVertical
-                    class="border-1 !text-gray-600 h-5.5 w-5.5 rounded outline-0 p-0.5 nc-workspace-menu transform transition-transform !text-gray-400 cursor-pointer hover:(!text-gray-500 bg-gray-100)"
-                  />
+                  <NcButton size="xsmall" type="ghost">
+                    <MdiDotsVertical
+                      class="text-gray-600 h-5.5 w-5.5 rounded outline-0 p-0.5 nc-workspace-menu transform transition-transform !text-gray-400 cursor-pointer hover:(!text-gray-500 bg-gray-100)"
+                    />
+                  </NcButton>
+
                   <template #overlay>
                     <NcMenu>
                       <template v-if="!el.roles?.includes('super')">
                         <!-- Resend invite Email -->
                         <NcMenuItem @click="resendInvite(el)">
-                          <component :is="iconMap.email" class="flex text-gray-500" />
+                          <component :is="iconMap.email" class="flex text-gray-600" />
                           <div>{{ $t('activity.resendInvite') }}</div>
                         </NcMenuItem>
                         <NcMenuItem @click="copyInviteUrl(el)">
-                          <component :is="iconMap.copy" class="flex text-gray-500" />
+                          <component :is="iconMap.copy" class="flex text-gray-600" />
                           <div>{{ $t('activity.copyInviteURL') }}</div>
                         </NcMenuItem>
                         <NcMenuItem @click="copyPasswordResetUrl(el)">
-                          <component :is="iconMap.copy" class="flex text-gray-500" />
+                          <component :is="iconMap.copy" class="flex text-gray-600" />
                           <div>{{ $t('activity.copyPasswordResetURL') }}</div>
                         </NcMenuItem>
                       </template>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index e362c79ba8..b8ec6d0b6d 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -388,6 +388,7 @@
     }
   },
   "labels": {
+    "noToken": "No Token",
     "tokenLimit": "Only one token per user is allowed",
     "duplicateAttachment": "File with name {filename} already attached",
     "toAddress": "To Address",