fix: refactor css

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

@@ -181,7 +181,7 @@ const handleCancel = () => {
         </NcButton>
       </div>
       <span>{{ $t('msg.apiTokenCreate') }}</span>
-      <div class="w-[780px] mt-5 border-1 rounded-md h-[530px] overflow-y-scroll">
+      <div class="w-full mt-5 border-1 rounded-md min-h-133 overflow-y-scroll">
         <div>
           <div class="flex w-full pl-5 bg-gray-50 border-b-1">
             <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9">{{ $t('title.tokenName') }}</span>
@@ -226,7 +226,12 @@ const handleCancel = () => {
               <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('title.noLabels')" />
             </div>
 
-            <div v-for="el of tokens" :key="el.id" data-testid="nc-token-list" class="flex border-b-1 pl-5 py-3 justify-between">
+            <div
+              v-for="el of tokens"
+              :key="el.id"
+              data-testid="nc-token-list"
+              class="flex border-b-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">
                   {{ el.description }}
@@ -304,3 +309,9 @@ const handleCancel = () => {
     </GeneralDeleteModal>
   </div>
 </template>
+
+<style scoped lang="scss">
+.token:nth-child(10) {
+  border-bottom: none;
+}
+</style>

packages/nc-gui/components/project/AccessSettings.vue

@@ -170,11 +170,11 @@ onMounted(async () => {
         <Empty description="$t('title.noMembersFound')" />
       </div>
       <div v-else class="nc-collaborators-list mt-6 h-full">
-        <div class="flex flex-col rounded-lg overflow-hidden border-1 w-250 max-h-[calc(100%-8rem)]">
+        <div class="flex flex-col rounded-lg overflow-hidden border-1 max-w-350 max-h-[calc(100%-8rem)]">
           <div class="flex flex-row bg-gray-50 min-h-12 items-center">
-            <div class="text-gray-700 users">{{ $t('objects.users') }}</div>
+            <div class="text-gray-700 users-email-grid">{{ $t('objects.users') }}</div>
-            <div class="text-gray-700 data-joined">{{ $t('title.dateJoined') }}</div>
+            <div class="text-gray-700 date-joined-grid">{{ $t('title.dateJoined') }}</div>
-            <div class="text-gray-700 access">{{ $t('general.access') }}</div>
+            <div class="text-gray-700 user-access-grid">{{ $t('general.access') }}</div>
           </div>
 
           <div class="flex flex-col nc-scrollbar-md">
@@ -183,14 +183,14 @@ onMounted(async () => {
               :key="i"
               class="user-row flex flex-row border-b-1 py-1 min-h-14 items-center"
             >
-              <div class="flex gap-3 items-center users">
+              <div class="flex gap-3 items-center users-email-grid">
                 <GeneralUserIcon size="base" :name="collab.email" :email="collab.email" />
                 <span class="truncate">
                   {{ collab.email }}
                 </span>
               </div>
-              <div class="data-joined">{{ timeAgo(collab.created_at) }}</div>
+              <div class="date-joined-grid">{{ timeAgo(collab.created_at) }}</div>
-              <div class="access">
+              <div class="user-access-grid">
                 <template v-if="accessibleRoles.includes(collab.roles)">
                   <RolesSelector
                     :role="collab.roles"
@@ -223,7 +223,6 @@ onMounted(async () => {
           </template>
         </InfiniteLoading>
       </div>
-      <!-- </div> -->
     </template>
   </div>
 </template>
@@ -241,19 +240,22 @@ onMounted(async () => {
   @apply mt-0.75;
 }
 
-.users {
+.users-email-grid {
   @apply flex-grow ml-4 w-1/2;
 }
 
-.data-joined {
+.date-joined-grid {
   @apply flex items-start;
   width: calc(50% - 10rem);
 }
 
-.access {
+.user-access-grid {
   @apply w-40;
 }
 
+.user-row {
+  @apply w-full;
+}
 .user-row:last-child {
   @apply border-b-0;
 }

packages/nc-gui/components/workspace/CollaboratorsList.vue

@@ -61,12 +61,14 @@ onMounted(async () => {
         <div class="flex w-2/5 text-gray-600">Users</div>
         <div class="flex w-2/5 text-gray-600">Date Joined</div>
         <div class="flex w-2/5 text-gray-600">Access</div>
-        <!-- <div class="flex w-2/5 text-gray-600">Added By</div> -->
         <div class="flex w-2/5 text-gray-600">Action</div>
       </div>
       <div class="flex flex-col nc-scrollbar-md">
-        <div v-for="(collab, i) of filterCollaborators" :key="i"
+        <div
-          class="relative w-full nc-collaborators nc-collaborators-list-row">
+          v-for="(collab, i) of filterCollaborators"
+          :key="i"
+          class="relative w-full nc-collaborators nc-collaborators-list-row"
+        >
           <div class="!py-0 w-2/5 email truncate">
             <div class="flex items-center gap-2">
               <span class="color-band" :style="{ backgroundColor: stringToColour(collab.email) }">{{
@@ -83,19 +85,23 @@ onMounted(async () => {
           <div class="w-2/5 roles">
             <div class="nc-collaborator-role-select">
               <template v-if="accessibleRoles.includes(collab.roles)">
-                <RolesSelector :role="collab.roles" :roles="accessibleRoles" :description="false"
+                <RolesSelector
-                  :on-role-change="(role: WorkspaceUserRoles) => updateCollaborator(collab, role)" />
+                  :role="collab.roles"
+                  :roles="accessibleRoles"
+                  :description="false"
+                  :on-role-change="(role: WorkspaceUserRoles) => updateCollaborator(collab, role)"
+                />
               </template>
               <template v-else>
                 <RolesBadge class="!bg-white" :role="collab.roles" />
               </template>
             </div>
           </div>
-          <!-- <div class="w-2/5"></div> -->
           <div class="w-2/5 pl-5">
             <NcDropdown v-if="collab.roles !== WorkspaceUserRoles.OWNER" :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)" />
+                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)"
+              />
               <template #overlay>
                 <NcMenu>
                   <NcMenuItem class="!text-red-500 !hover:bg-red-50" @click="removeCollaborator(collab.id)">