web/satellite: fix for long names in tables

Added truncating for long names in access grant and project member tables.
Added title to all table items so that full value is displayed on hover.

Issue:
https://github.com/storj/storj/issues/5130

Change-Id: I7f81d88c8ff4db606bdfeb15406ba3ee3fcec968

web/satellite/src/components/accessGrants/AccessGrantsItem.vue

@@ -116,4 +116,21 @@ export default class AccessGrantsItem extends Resizable {
             }
         }
     }
+
+    :deep(.primary) {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    :deep(th) {
+        max-width: 25rem;
+    }
+
+    @media screen and (max-width: 940px) {
+
+        :deep(th) {
+            max-width: 10rem;
+        }
+    }
 </style>

web/satellite/src/components/browser/FileEntry.vue

@@ -589,4 +589,28 @@ function cancelDeletion(): void {
     border-radius: 50%;
     animation: 0.75s linear infinite spinner-border;
 }
+
+:deep(.primary) {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+:deep(th) {
+    max-width: 26rem;
+}
+
+@media screen and (max-width: 940px) {
+
+    :deep(th) {
+        max-width: 15rem;
+    }
+}
+
+@media screen and (max-width: 650px) {
+
+    :deep(th) {
+        max-width: 10rem;
+    }
+}
 </style>

web/satellite/src/components/common/TableItem.vue

@@ -21,7 +21,7 @@
                 <div v-if="icon && index === 0" class="item-icon file-background">
                     <component :is="icon" />
                 </div>
-                <p :class="{primary: index === 0}" @click.stop="(e) => cellContentClicked(index, e)">
+                <p :class="{primary: index === 0}" :title="val" @click.stop="(e) => cellContentClicked(index, e)">
                     <middle-truncate v-if="(itemType.toLowerCase() === 'file')" :text="val" />
                     <span v-else>{{ val }}</span>
                 </p>
@@ -235,7 +235,7 @@ function cellContentClicked(cellIndex: number, event: Event) {
         padding: 2px;
         border-radius: 8px;
         height: 32px;
-        width: 32px;
+        min-width: 32px;
         display: flex;
         align-items: center;
         justify-content: center;

web/satellite/src/components/team/ProjectMemberListItem.vue

@@ -52,4 +52,21 @@ export default class ProjectMemberListItem extends Resizable {
             color: #afb7c1;
         }
     }
+
+    :deep(.primary) {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    :deep(th) {
+        max-width: 25rem;
+    }
+
+    @media screen and (max-width: 940px) {
+
+        :deep(th) {
+            max-width: 10rem;
+        }
+    }
 </style>