Fixed multi line in users list

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

settings/css/settings.scss

@@ -1463,10 +1463,25 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 						display: block !important;
 					}
 				}
+				/* inputs like mail, username, password */
 				&:not(.userActions) > input:not([type='submit']) {
 					width: 100%;
 					min-width: 0;
 				}
+				&.name {
+					word-break: break-all;
+				}
+				&.displayName,
+				&.mailAddress {
+					> input {
+						text-overflow: ellipsis;
+					}
+				}
+				&.name,
+				&.storageLocation {
+					// better multi-line visual
+					line-height: 1em;
+				}
 				&.quota {
                     .multiselect--active + progress {
                         display: none;

settings/src/components/userList/userRow.vue

@@ -39,7 +39,8 @@
 				 :srcset="generateAvatar(user.id, 64)+' 2x, '+generateAvatar(user.id, 128)+' 4x'"
 				 v-if="!loading.delete && !loading.disable">
 		</div>
-		<div class="name">{{user.id}}</div>
+		<!-- dirty hack to ellipsis on two lines -->
+		<div class="name">{{user.id.substr(0, 40)}}{{user.id.substr(0, 40).length===40?'...':''}}</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"