fix: removed scrollbar

packages/nc-gui/components/account/Token.vue

@@ -160,8 +160,8 @@ const handleCancel = () => {
 </script>
 
 <template>
-  <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2">
-    <div class="max-w-202 mx-auto px-4" data-testid="nc-token-list">
+  <div class="h-full pt-2">
+    <div class="max-w-202 mx-auto px-4 h-full" data-testid="nc-token-list">
       <div class="py-2 flex gap-4 items-center justify-between">
         <h6 class="text-2xl my-4 text-left font-bold">{{ $t('title.apiTokens') }}</h6>
         <NcTooltip :disabled="!(isEeUI && tokens.length)">
@@ -185,22 +185,16 @@ const handleCancel = () => {
         </NcTooltip>
       </div>
       <span>{{ $t('msg.apiTokenCreate') }}</span>
-      <div class="w-full mt-5 rounded-md h-136 overflow-y-scroll">
-        <div>
-          <div class="flex w-full pl-5 bg-gray-50 border-1">
+      <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">
           <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>
-          <main>
+        <div class="nc-scrollbar-md !overflow-y-auto h-[calc(100%-3rem)]">
           <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-x-1"
-                :class="{
-                  'border-b-1': !tokens.length,
-                }"
-              >
+            <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 flex-col w-full">
                 <a-input
                   :ref="selectInputOnMount"
@@ -218,13 +212,7 @@ const handleCancel = () => {
                 <NcButton v-if="!isLoading" type="secondary" size="small" @click="handleCancel">
                   {{ $t('general.cancel') }}
                 </NcButton>
-                  <NcButton
-                    type="primary"
-                    size="sm"
-                    :is-loading="isLoading"
-                    data-testid="nc-token-save-btn"
-                    @click="generateToken"
-                  >
+                <NcButton type="primary" size="sm" :is-loading="isLoading" data-testid="nc-token-save-btn" @click="generateToken">
                   {{ $t('general.save') }}
                 </NcButton>
               </div>
@@ -238,7 +226,7 @@ const handleCancel = () => {
             v-for="el of tokens"
             :key="el.id"
             data-testid="nc-token-list"
-              class="flex border-1 pl-5 py-3 justify-between token"
+            class="flex border-t-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">
@@ -283,7 +271,6 @@ const handleCancel = () => {
               </div>
             </span>
           </div>
-          </main>
         </div>
       </div>
       <div v-if="pagination.total > 10" class="flex items-center justify-center mt-5">
@@ -317,3 +304,8 @@ const handleCancel = () => {
     </GeneralDeleteModal>
   </div>
 </template>
+<style lang="scss" scoped>
+.token:last-child {
+  @apply border-b-1;
+}
+</style>

packages/nc-gui/pages/account/index.vue

@@ -145,7 +145,7 @@ const logout = async () => {
         <!-- Sub Tabs -->
 
         <div class="flex flex-col w-full ml-65">
-          <div class="flex flex-row p-3 items-center">
+          <div class="flex flex-row p-3 items-center h-14">
             <div class="flex-1" />
 
             <LazyGeneralReleaseInfo />
@@ -185,12 +185,19 @@ const logout = async () => {
               </NcDropdown>
             </template>
           </div>
-          <div class="flex flex-col container mx-auto mt-2">
+          <div
+            class="flex flex-col container mx-auto"
+            :style="{
+              height: 'calc(100vh - 3.5rem)',
+            }"
+          >
+            <div class="mt-2 h-full">
               <NuxtPage />
             </div>
           </div>
         </div>
       </div>
+    </div>
   </NuxtLayout>
 </template>