Css clamp

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

settings/css/settings.scss

@@ -1479,8 +1479,17 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 				}
 				&.name,
 				&.storageLocation {
-					// better multi-line visual
+					/* better multi-line visual */
 					line-height: 1.3em;
+					max-height: 2.6em;
+					overflow : hidden;
+					/* not supported by all browsers 
+					   so we keep the overflow hidden
+					   as a fallback */
+					text-overflow: ellipsis;
+					display: -webkit-box;
+					-webkit-line-clamp: 2;
+					-webkit-box-orient: vertical;
 				}
 				&.quota {
                     .multiselect--active + progress {

settings/src/components/userList/userRow.vue

@@ -40,7 +40,7 @@
 				 v-if="!loading.delete && !loading.disable">
 		</div>
 		<!-- dirty hack to ellipsis on two lines -->
-		<div class="name">{{user.id.substr(0, 40)}}{{user.id.substr(0, 40).length===40?'…':''}}</div>
+		<div class="name">{{user.id}}</div>
 		<form class="displayName" :class="{'icon-loading-small': loading.displayName}" v-on:submit.prevent="updateDisplayName">
 			<input :id="'displayName'+user.id+rand" type="text"
 					:disabled="loading.displayName||loading.all"