From 6a00025545df9263359316fa2461101ca1933113 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Mon, 11 Apr 2016 12:05:37 -0400
Subject: [PATCH] Add a maximum width on the friendly name and service name
 columns

---
 static/css/directives/ui/service-keys-manager.css | 9 +++++++++
 static/directives/service-keys-manager.html       | 8 +++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/static/css/directives/ui/service-keys-manager.css b/static/css/directives/ui/service-keys-manager.css
index 508fc2ef5..8c1410db9 100644
--- a/static/css/directives/ui/service-keys-manager.css
+++ b/static/css/directives/ui/service-keys-manager.css
@@ -86,4 +86,13 @@
     font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
     background: white;
     min-height: 500px;
+}
+
+.service-keys-manager-element .max-text {
+  display: inline-block;
+  max-width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
 }
\ No newline at end of file
diff --git a/static/directives/service-keys-manager.html b/static/directives/service-keys-manager.html
index 2cb957b40..4815725ff 100644
--- a/static/directives/service-keys-manager.html
+++ b/static/directives/service-keys-manager.html
@@ -54,10 +54,12 @@
            </span>
           </td>
           <td>
-            <a ng-click="toggleDetails(key)" bo-if="key.name"><span bo-text="key.name"></span></a>
-            <a ng-click="toggleDetails(key)" bo-if="!key.name" class="unnamed">(Unnamed)</a>
+            <span class="max-text">
+              <a ng-click="toggleDetails(key)" bo-if="key.name"><span bo-text="key.name"></span></a>
+              <a ng-click="toggleDetails(key)" bo-if="!key.name" class="unnamed">(Unnamed)</a>
+            </span>
           </td>
-          <td><span bo-text="key.service"></span></td>
+          <td><span class="max-text" bo-text="key.service"></span></td>
           <td>
             <span am-time-ago="key.created_date"></span>
           </td>