fix: css refactor

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

@@ -161,7 +161,7 @@ const handleCancel = () => {
 
 <template>
   <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2">
-    <div class="max-w-[810px] mx-auto p-4" data-testid="nc-token-list">
+    <div class="max-w-202 mx-auto px-4" 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)">
@@ -195,7 +195,12 @@ const handleCancel = () => {
           </div>
           <main>
             <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">
+              <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 flex-col w-full">
                   <a-input
                     :ref="selectInputOnMount"
@@ -224,9 +229,8 @@ const handleCancel = () => {
                   </NcButton>
                 </div>
               </div>
-              <NcDivider />
             </div>
-            <div v-if="!tokens.length" class="h-118 justify-center flex items-center">
+            <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>
 
@@ -282,7 +286,7 @@ const handleCancel = () => {
           </main>
         </div>
       </div>
-      <div v-if="pagination.total > 10" class="flex items-center justify-center mt-15">
+      <div v-if="pagination.total > 10" class="flex items-center justify-center mt-5">
         <a-pagination
           v-model:current="currentPage"
           :total="pagination.total"

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

@@ -154,8 +154,8 @@ const openDeleteModal = (user: UserType) => {
 
 <template>
   <div data-testid="nc-super-user-list">
-    <div class="max-w-195 mx-auto">
+    <div class="max-w-195 mx-auto h-full">
-      <div class="text-2xl my-4 text-left font-weight-bold">{{ $t('title.userManagement') }}</div>
+      <div class="text-2xl text-left font-weight-bold">{{ $t('title.userManagement') }}</div>
       <div class="py-2 flex gap-4 items-center justify-between">
         <a-input v-model:value="searchText" class="!max-w-90 !rounded-md" placeholder="Search members" @change="loadUsers()">
           <template #prefix>
@@ -172,7 +172,8 @@ const openDeleteModal = (user: UserType) => {
           </NcButton>
         </div>
       </div>
-      <div class="w-full mt-5 border-1 rounded-md h-[613px] max-w-250">
+      <div class="mt-3 flex flex-col justify-between">
+        <div class="w-full border-1 rounded-md max-w-250 h-160">
           <div class="flex w-full bg-gray-50 border-b-1">
             <span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start pl-10">{{ $t('labels.email') }}</span>
             <span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start pl-20">{{ $t('objects.role') }}</span>
@@ -271,7 +272,7 @@ const openDeleteModal = (user: UserType) => {
             </div>
           </section>
         </div>
-      <div v-if="pagination.total > 10" class="flex items-center justify-center mt-7">
+        <div v-if="pagination.total > 10" class="flex items-center justify-center mt-4">
           <a-pagination
             v-model:current="currentPage"
             :total="pagination.total"
@@ -279,6 +280,7 @@ const openDeleteModal = (user: UserType) => {
             @change="loadUsers(currentPage, currentLimit)"
           />
         </div>
+      </div>
       <GeneralDeleteModal v-model:visible="isOpen" entity-name="User" :on-delete="() => deleteUser()">
         <template #entity-preview>
           <span>