ID Panels with long roles names should fit

See this screen shot: http://pasteboard.co/14TpE09S.png
The longer role names or having multiple roles is not working well beyond the
most basic _member_ admin type roles. It was also noticed while in the CSS
for the member roles list, that portions of the CSS could benefit from some
very simple refactoring to take advantage of the recent CSS Theme reorg.

Change-Id: Ibf0be2850669fbc8f6d963f70eb9b6c91281de68
Closes-Bug: #1463181

horizon/static/horizon/js/horizon.membership.js

@@ -179,10 +179,6 @@ horizon.membership = {
     var $roles_display = $dropdown.children('.dropdown-toggle').children('.roles_display');
     var roles_to_display = [];
     for (var i = 0; i < role_ids.length; i++) {
-      if (i === 2) {
-        roles_to_display.push('...');
-        break;
-      }
       roles_to_display.push(horizon.membership.roles[step_slug][role_ids[i]]);
     }
     var text = roles_to_display.join(', ');

horizon/templates/horizon/client_side/_membership.html

@@ -12,7 +12,7 @@
   <li class="dropdown role_options">
     <a class="dropdown-toggle btn btn-default" data-toggle="dropdown" href="#">
       <span class="roles_display">[[roles_label]]</span>
-      <span class="caret"></span>
+      <span class="fa fa-caret-down"></span>
     </a>
     <ul class="dropdown-menu role_dropdown clearfix">
       [[#roles]]

openstack_dashboard/static/dashboard/scss/_variables.scss

@@ -15,7 +15,7 @@ $body-min-width: 900px !default;
 $sidebar-background-color: #f9f9f9 !default;
 $sidebar-width: 220px !default;
 $border-color: #dddddd !default;
-$table-bg-odd: #f9f9f9 !default;
+$table-bg-odd: $table-bg-accent !default;
 $content-body-padding: 15px !default;
 
 
@@ -203,3 +203,13 @@ $magic-search-border-color: #cccccc !default;
 $magic-search-margin-bottom: 0 !default;
 $magic-search-border-radius: 3px !default;
 $magic-search-margin-padding: 2px !default;
+
+/* Member lists */
+$members-list-padding: 3px !default;
+$members-list-border: 1px solid $gray-light !default;
+// TODO: These values are hardcoded lengths but they are actually
+// very dependant on the modal size set in the theme.  We need
+// to eventually readdress these and calculate them dynamically
+$members-list-item-width: 130px !default;
+$members-list-item-max-width: 327px !default;
+$members-list-roles-width: 125px !default;

openstack_dashboard/static/dashboard/scss/horizon.scss

@@ -1346,32 +1346,55 @@ label.log-length {
       display: block;
     }
     ul.btn-group {
-      margin-left:0px;
+      margin-left:0;
-      padding: 3px;
+      padding: $members-list-padding;
-      margin-bottom: 0px;
+      margin-bottom: 0;
-      border: 1px solid $gray-light;
+      border: $members-list-border;
       border-bottom: none;
       &.last_stripe {
         border-bottom: 1px solid $table-border-color;
       }
       &.light_stripe {
-        background-color: white;
+        background-color: $table-bg;
       }
       &.dark_stripe {
-        background-color: $table-bg-odd;
+        background-color: $table-bg-accent;
       }
       &:hover {
         background-color: $border-color;
       }
-      li.member {
-        padding: 6px 10px 5px 10px;
-      }
       li.active {
         float: right;
         a:hover {
           background-color: $link-hover-color;
         }
       }
+      .member,
+      .role_options .roles_display {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .member {
+        padding: $nav-link-padding;
+        padding-right: 0;
+        padding-left: $padding-base-vertical;
+        max-width: $members-list-item-width;
+      }
+      .role_options {
+        margin-left: 0;
+        & > a {
+          padding: nth($nav-link-padding, 1) $padding-small-horizontal;
+          .roles_display {
+            display: inline-block;
+            max-width: $members-list-roles-width;
+            line-height: 1;
+            padding-right: $padding-base-vertical;
+          }
+        }
+        .role_dropdown > li {
+          word-break: break-all;
+        }
+      }
     }
   }