Merge "Cleanup UI columns on change list"
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
index 0df017b..acbb367 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
@@ -44,6 +44,27 @@
       .cell {
         padding: .3em .5em;
       }
+      .container {
+        position: relative;
+      }
+      .content {
+        overflow: hidden;
+        position: absolute;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 100%;
+      }
+      .content a {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: 100%;
+      }
+      .spacer {
+        height: 0;
+        overflow: hidden;
+      }
       a {
         color: var(--default-text-color);
         display: block;
@@ -88,7 +109,17 @@
     </td>
     <td class="cell subject"
         hidden$="[[isColumnHidden('Subject', visibleChangeTableColumns)]]">
-      <a href$="[[changeURL]]">[[change.subject]]</a>
+      <div class="container">
+        <div class="content">
+          <a title$="[[change.subject]]" href$="[[changeURL]]">
+            [[change.subject]]
+          </a>
+        </div>
+        <div class="spacer">
+           [[change.subject]]
+        </div>
+        <span>&nbsp;</span>
+      </div>
     </td>
     <td class="cell status"
         hidden$="[[isColumnHidden('Status', visibleChangeTableColumns)]]">
diff --git a/polygerrit-ui/app/styles/gr-change-list-styles.html b/polygerrit-ui/app/styles/gr-change-list-styles.html
index 544aed8..96692f1 100644
--- a/polygerrit-ui/app/styles/gr-change-list-styles.html
+++ b/polygerrit-ui/app/styles/gr-change-list-styles.html
@@ -39,40 +39,26 @@
       gr-change-star {
         vertical-align: middle;
       }
-      .number {
-        max-width: 4em;
-      }
-      .subject {
-        word-break: break-word;
-      }
-      .status {
-        max-width: 9em;
-      }
-      .owner {
-        max-width: 15em;
-      }
-      .project,
-      .branch {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
+      .keyboard,
+      .branch,
+      .star,
+      .label,
+      .number,
+      .owner,
+      .updated,
+      .size,
+      .status,
       .project {
-        max-width: 10em;
-      }
-      .branch {
-        max-width: 7em;
+        white-space: nowrap;
       }
       .updated {
-        max-width: 9em;
         text-align: right;
       }
-      .size {
-        max-width: 9em;
+      .size,
+      .updated {
         text-align: right;
       }
       .label {
-        max-width: 2.6em;
         text-align: center;
       }
       @media only screen and (max-width: 50em) {