Fix gr-identities styles

This makes it so the button is no longer a link.

This also makes it so the text is not crushed together making
it hard to read. This change slightly improves this.

Change-Id: I7c48b72292e472fbbcb9568b7f0ced17fce72511

1 files changed, 42 insertions, 32 deletions

diff --git a/polygerrit-ui/app/elements/settings/gr-identities/gr-identities.html b/polygerrit-ui/app/elements/settings/gr-identities/gr-identities.html
index 872e55846a..4c7edcfea7 100644
--- a/polygerrit-ui/app/elements/settings/gr-identities/gr-identities.html
+++ b/polygerrit-ui/app/elements/settings/gr-identities/gr-identities.html
@@ -27,8 +27,20 @@ limitations under the License.
   <template>
     <style include="shared-styles"></style>
     <style include="gr-form-styles">
-      td {
-        width: 5em;
+      tr th.emailAddressHeader,
+      tr th.identityHeader {
+        width: 15em;
+        padding: 0 10px;
+      }
+      tr td.statusColumn,
+      tr td.emailAddressColumn,
+      tr td.identityColumn {
+        word-break: break-word;
+      }
+      tr td.emailAddressColumn,
+      tr td.identityColumn {
+        padding: 4px 10px;
+        width: 15em;
       }
       .deleteButton {
         float: right;
@@ -36,40 +48,38 @@ limitations under the License.
       .deleteButton:not(.show) {
         display: none;
       }
-      .statusColumn {
-        white-space: nowrap;
-      }
     </style>
     <div class="gr-form-styles">
-      <table id="identities">
-        <thead>
-          <tr>
-            <th class="statusHeader">Status</th>
-            <th class="emailAddressHeader">Email Address</th>
-            <th class="identityHeader">Identity</th>
-            <th class="deleteHeader"></th>
-          </tr>
-        </thead>
-        <tbody>
-          <template is="dom-repeat" items="[[_identities]]" filter="filterIdentities">
+      <fieldset>
+        <table>
+          <thead>
             <tr>
-              <td class$="statusColumn">
-                [[_computeIsTrusted(item.trusted)]]
-              </td>
-              <td>[[item.email_address]]</td>
-              <td>[[_computeIdentity(item.identity)]]</td>
-              <td>
-                <gr-button
-                    link
-                    class$="deleteButton [[_computeHideDeleteClass(item.can_delete)]]"
-                    on-tap="_handleDeleteItem">
-                  Delete
-                </gr-button>
-              </td>
+              <th class="statusHeader">Status</th>
+              <th class="emailAddressHeader">Email Address</th>
+              <th class="identityHeader">Identity</th>
+              <th class="deleteHeader"></th>
             </tr>
-          </template>
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            <template is="dom-repeat" items="[[_identities]]" filter="filterIdentities">
+              <tr>
+                <td class="statusColumn">
+                  [[_computeIsTrusted(item.trusted)]]
+                </td>
+                <td class="emailAddressColumn">[[item.email_address]]</td>
+                <td class="identityColumn">[[_computeIdentity(item.identity)]]</td>
+                <td class="deleteColumn">
+                  <gr-button
+                      class$="deleteButton [[_computeHideDeleteClass(item.can_delete)]]"
+                      on-tap="_handleDeleteItem">
+                    Delete
+                  </gr-button>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </fieldset>
     </div>
     <gr-overlay id="overlay" with-backdrop>
       <gr-confirm-delete-item-dialog