KEYCLOAK-813

Long user attributes render off the screen

forms/common-themes/src/main/resources/theme/base/admin/resources/partials/user-list.html

@@ -26,11 +26,11 @@
         </tr>
         <tr>
         <tr data-ng-show="searchLoaded && users.length > 0">
-            <th>ID</th>
-            <th>Username</th>
-            <th>Email</th>
-            <th>Last Name</th>
-            <th>First Name</th>
+            <th class="w-15">ID</th>
+            <th class="w-15">Username</th>
+            <th class="w-15">Email</th>
+            <th class="w-15">Last Name</th>
+            <th class="w-15">First Name</th>
             <th colspan="{{access.impersonation == true ? '3' : '2'}}">Actions</th>
         </tr>
         </tr>
@@ -48,11 +48,11 @@
         </tfoot>
         <tbody>
         <tr ng-repeat="user in users">
-            <td style="max-width: 10em;"><a href="#/realms/{{realm.realm}}/users/{{user.id}}">{{user.id}}</a></td>
-            <td>{{user.username}}</td>
-            <td>{{user.email}}</td>
-            <td>{{user.lastName}}</td>
-            <td>{{user.firstName}}</td>
+            <td class="clip"><a href="#/realms/{{realm.realm}}/users/{{user.id}}">{{user.id}}</a></td>
+            <td class="clip">{{user.username}}</td>
+            <td class="clip">{{user.email}}</td>
+            <td class="clip">{{user.lastName}}</td>
+            <td class="clip">{{user.firstName}}</td>
             <td class="kc-action-cell">
                 <button class="btn btn-default btn-block btn-sm" kc-open="/realms/{{realm.realm}}/users/{{user.id}}">Edit</button>
             </td>

forms/common-themes/src/main/resources/theme/keycloak/admin/resources/css/styles.css

@@ -26,7 +26,46 @@ table {
     margin-top: 0px !important;
 }
 
+table {
+    max-width: 100%;
+}
 
+td.clip {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 0;
+}
+
+th.w-10 {
+    width: 10%;
+}
+
+th.w-15 {
+    width: 15%;
+}
+
+th.w-20 {
+    width: 20%;
+}
+
+
+th.w-25 {
+    width: 25%;
+}
+
+th.w-30 {
+    width: 30%;
+}
+
+
+th.w-35 {
+    width: 35%;
+}
+
+th.w-40 {
+    width: 40%;
+}
 
 /*********** Loading ***********/
 
@@ -299,6 +338,9 @@ h1 i {
 .kc-action-cell {
     position: relative;
     width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .kc-action-cell .btn {
@@ -308,6 +350,9 @@ h1 i {
     left: 0;
     right: 0;
     bottom: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .kc-sorter span {