web/satellite: api key and proj member name's length visibility extended

Change-Id: If42dc48849f6414f4224d57ffa7267431426b457

web/satellite/src/components/apiKeys/ApiKeysItem.vue

@@ -14,7 +14,7 @@
                 <p class="name">{{ itemData.formattedName() }}</p>
             </div>
         </div>
-        <div class="apikey-item-container__common-info">
+        <div class="apikey-item-container__common-info date-item-container">
             <p class="date">{{ itemData.getDate() }}</p>
         </div>
     </div>
@@ -58,7 +58,7 @@ export default class ApiKeysItem extends Vue {
             display: flex;
             align-items: center;
             justify-content: flex-start;
-            width: 40%;
+            width: 60%;
 
             .checkbox-container {
                 margin-left: 28px;
@@ -130,4 +130,8 @@ export default class ApiKeysItem extends Vue {
             color: #fff;
         }
     }
+
+    .date-item-container {
+        width: 40%;
+    }
 </style>

web/satellite/src/components/apiKeys/SortingHeader.vue

@@ -85,17 +85,9 @@ export default class SortApiKeysHeader extends Vue {
         background-color: rgba(255, 255, 255, 0.3);
         margin-top: 31px;
 
-        &__date-item {
-            width: 60%;
-
-            &__title {
-                margin: 0;
-            }
-        }
-
         &__name-item,
         &__date-item {
-            width: 40%;
+            width: 60%;
             display: flex;
             align-items: center;
             margin: 0;
@@ -112,5 +104,13 @@ export default class SortApiKeysHeader extends Vue {
                 margin-left: 0;
             }
         }
+
+        &__date-item {
+            width: 40%;
+
+            &__title {
+                margin: 0;
+            }
+        }
     }
 </style>

web/satellite/src/types/apiKeys.ts

@@ -93,11 +93,11 @@ export class ApiKey {
     public formattedName(): string {
         const name = this.name;
 
-        if (name.length < 12) {
+        if (name.length < 20) {
             return name;
         }
 
-        return name.slice(0, 12) + '...';
+        return name.slice(0, 20) + '...';
     }
 
     public getDate(): string {

web/satellite/src/types/projectMembers.ts

@@ -114,8 +114,8 @@ export class ProjectMember {
     public formattedFullName(): string {
         let fullName: string = this.user.getFullName();
 
-        if (fullName.length > 16) {
-            fullName = fullName.slice(0, 13) + '...';
+        if (fullName.length > 15) {
+            fullName = fullName.slice(0, 15) + '...';
         }
 
         return fullName;

web/satellite/tests/unit/apiKeys/__snapshots__/ApiKeysItem.spec.ts.snap

@@ -16,7 +16,7 @@ exports[`ApiKeysItem.vue renders correctly 1`] = `
       <p class="name"></p>
     </div>
   </div>
-  <div class="apikey-item-container__common-info">
+  <div class="apikey-item-container__common-info date-item-container">
     <p class="date"></p>
   </div>
 </div>