commit f5eeb927bec2aa119eae8bbb8b8a42199ad564dc
author Wyatt Allen <wyatta@google.com> Mon Aug 01 12:59:12 2016 -0700
committer Wyatt Allen <wyatta@google.com> Mon Aug 01 13:15:34 2016 -0700
tree 9f28632e616d5ddeb6b900cf490ca032bd27afb3
parent f1063a2690683231e1935b47a64dfde7857a8fe6

Use ellipsis for long topic names

Very long topic names were stretching the dimensions of the change
metadata section. Configures the maximum width for the label to the same
value as the already-established maximum width for the input and sets up
styles for text to be "ellipsized" when it exceeds that width.

Bug: Issue 4284
Change-Id: I9f787f2e16a302a99c843579f79049750f482438

polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html

diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
index 33180d8..76a9c77 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
@@ -24,6 +24,11 @@
       }
       label {
         color: #777;
+        display: inline-block;
+        max-width: 8em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
       label.editable {
         cursor: pointer;

polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.js

diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.js b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.js
index 0121308..eb604f7 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.js
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.js
@@ -32,6 +32,7 @@
         type: String,
         notify: true,
         value: null,
+        observer: '_updateTitle',
       },
       placeholder: {
         type: String,
@@ -100,5 +101,9 @@
       }
       return classes.join(' ');
     },
+
+    _updateTitle: function(value) {
+      this.setAttribute('title', (value && value.length) ? value : null);
+    },
   });
 })();