Use CSS ellipsis, clean up tooltip code

Signed-off-by: onehappycat <onehappycat@gmx.com>

Author: onehappycat

apps/files_sharing/js/dist/files_sharing_tab.js

@@ -15,18 +15,16 @@
 		<div class="name">
 			{{ user.id }}
 			<div class="displayName subtitle">
-				<div v-if="user.displayname.length>20" v-tooltip.auto="user.displayname">
-					{{ user.displayname.substring(0,20)+'...' }}
+				<div v-tooltip="user.displayname.length > 20 ? user.displayname : ''" class="cellText">
+					{{ user.displayname }}
 				</div>
-				<div v-else>{{ user.displayname }}</div>
 			</div>
 		</div>
 		<div />
 		<div class="mailAddress">
-			<div v-if="user.email !== null && user.email.length>20" v-tooltip.auto="user.email">
-				{{ user.email.substring(0,20)+'...' }}
+			<div v-tooltip="user.email !== null && user.email.length > 20 ? user.email : ''" class="cellText">
+				{{ user.email }}
 			</div>
-			<div v-else>{{ user.email }}</div>
 		</div>
 		<div class="groups">
 			{{ userGroupsLabels }}
@@ -161,5 +159,9 @@ export default {
 </script>
 
 <style scoped>
-
+	.cellText {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
 </style>