diff --git a/app/styles/_membership.less b/app/styles/_membership.less
index 1b63374fcf..a900fae62b 100644
--- a/app/styles/_membership.less
+++ b/app/styles/_membership.less
@@ -1,71 +1,101 @@
 .membership {
-  // TODO: make generic?
-  h1 {
-    .learn-more-inline {
-      white-space: nowrap;
-      margin-right: 10px;
-      margin-left: 0px;
-      display: inline-block;
+  .action-set {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    @media(min-width: @screen-sm-min) {
+      flex-wrap: nowrap;
+    }
+    @media(min-width: @screen-md-min) {
+      flex-direction: row;
     }
   }
   .content-pane {
     width: 100%;
-    .col-add-role {
-      padding: 10px 0;
-      min-width: 150px;
-    }
     .add-role-to {
       margin-left: -1px;
     }
-    .item-row,
+    .col-add-role {
+      width: 100%;
+      @media(min-width: @screen-xs-min) {
+        min-width: 245px;
+        width: auto;
+      }
+    }
     .col-heading {
       border-bottom: 1px solid #ededed;
-      h3 {
+      display: none;
+      @media(min-width: @screen-xs-min) {
+        display: flex;
         margin: 0;
       }
     }
-    .item-row {
-      padding: 5px 10px 5px 5px;
-      margin-bottom: 20px;
-    }
-    .col-heading {
-      margin-bottom: 20px;
-      .col-add-role {
-        h3 {
-          display: none;
+    .col-name {
+      @media(min-width: @screen-xs-min) {
+        max-width: 30%;
+        .container-pf-nav-pf-vertical.collapsed-nav & {
+          max-width: 40%;
+        }
+        padding: 0 5px 0 0;
+        input {
+          max-width: 225px;
         }
       }
-    }
-    .col-name {
       &.half-width {
-        min-width: 50%;
+        max-width: 50%;
       }
       .word-break-all;
-      width: 100%;
-      padding: 0 0px 10px 0;
-      input {
-        max-width: 150px;
-      }
+        padding: 0 0px 10px 0;
+        width: 100%;
       .new-project {
         margin-top: 2px;
       }
     }
+    .col-roles {
+      display: flex;
+      flex-wrap: wrap;
+      padding-bottom: 5px;
+      @media(min-width: @screen-md-min) {
+        padding: 0;
+      }
+    }
+    .content-serviceaccount .form-new-role .col-roles {
+      display: block;
+    }
     .form-new-role {
       .col-roles {
         display: none;
       }
-    }
-    .content-serviceaccount {
-      .form-new-role {
-        .col-roles {
-          display: block;
+      @media(min-width: @screen-md-min) {
+        .action-set {
+          flex-direction: column;
+          .col-add-role {
+            align-self: flex-end;
+          }
         }
       }
     }
     .input-name {
-      width: 150px;
       margin-bottom: 5px;
     }
+    .item-row {
+      border-bottom: 1px solid #ededed;
+      padding: 10px 10px 10px 5px;
+      @media(min-width: @screen-xs-min) {
+        &.highlight-hover:hover {
+          background-color: #fafafa;
+        }
+      }
+    }
+    .membership-empty {
+      margin-top: 20px;
+    }
+    .show-hidden-roles .action-set {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+    }
     .select-project {
       width: 150px;
     }
@@ -82,68 +112,33 @@
         }
       }
     }
+    .service-account {
+      @media(max-width: @screen-sm-max) {
+        flex-direction: column; // stack inputs because lack of horizontal space
+      }
+      .select-role {
+        padding-bottom: 5px;
+        width: auto;
+        @media(min-width: @screen-md-min) {
+          width: 150px;
+        }
+      }
+    }
     // FIXME (bpeterse): to update in layout.attrs & eliminate the workaround here
     // fix for collapse of flex items in IE
     // https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored
     [flex-collapse-fix],
     [flex], // fixes ie flex-direction: column collapse issue
-    .item-row,
+    .col-add-role,
     .col-heading,
     .col-name,
-    .col-roles,
-    .col-add-role {
+    .item-row {
       flex-shrink: 0;
       flex-basis: auto;
     }
   }
+  // allow for taller select due to role help text
   .ui-select-bootstrap > .ui-select-choices {
-    // allow for taller select due to role help text
     max-height: 300px;
   }
 }
-
-@media(min-width: @screen-xs-min) {
-  .membership {
-    .content-pane {
-      .col-add-role {
-        padding: 0;
-        min-width: 245px;
-      }
-      .item-row,
-      .col-heading {
-        border-bottom: none;
-        margin-bottom: none;
-      }
-      .item-row.highlight-hover:hover {
-        background-color: #fafafa;
-      }
-      .col-heading {
-        .col-add-role {
-          h3 {
-            display: block;
-          }
-          a {
-            display: block;
-            padding-left: 10px;
-          }
-        }
-      }
-      .col-name {
-        min-width: 225px;
-        max-width: 30%;
-        padding: 0 5px 10px 0;
-        input {
-          max-width: 175px;
-        }
-      }
-      .form-new-role {
-        .col-roles {
-          display: block;
-        }
-      }
-      .select-role {
-        width: 150px;
-      }
-    }
-  }
-}
diff --git a/app/views/membership.html b/app/views/membership.html
index 14160f62d1..da29e1475c 100644
--- a/app/views/membership.html
+++ b/app/views/membership.html
@@ -59,22 +59,22 @@ <h1>
             ng-class="'content-' + subjectKind.name.toLowerCase()">
 
             <div
-              class="col-heading item-row"
-              row mobile="column" flex-collapse-fix>
-              <div class="col-name" flex conceal="mobile" ng-class="{ 'half-width': !mode.edit }">
+              class="col-heading"
+              flex-collapse-fix>
+              <div class="col-name" flex ng-class="{ 'half-width': !mode.edit }">
                 <h3>Name</h3>
               </div>
-              <div class="col-roles" flex conceal="mobile">
+              <div class="col-roles" flex>
                 <h3>Roles</h3>
               </div>
-              <div ng-if="mode.edit" class="col-add-role" conceal="tablet" flex-collapse-fix>
+              <div ng-if="mode.edit" class="col-add-role visible-md-block visible-lg-block" flex-collapse-fix>
                 <h3>
                   Add Another Role
                 </h3>
               </div>
             </div>
 
-            <div ng-if="(subjectKind.subjects | hashSize) === 0">
+            <div ng-if="(subjectKind.subjects | hashSize) === 0" class="membership-empty">
               <p>
                 <em>There are no {{ subjectKind.name | humanizeKind }}s with access to this project.</em>
               </p>
@@ -106,12 +106,8 @@ <h3>
                   </span>
                 </span>
               </div>
-              <div
-                class="action-set"
-                flex row tablet="column" mobile="column">
-                <div
-                  class="col-roles"
-                  row tablet="column" flex wrap axis="start">
+              <div class="action-set">
+                <div class="col-roles">
                   <action-chip
                     ng-repeat="role in subject.roles"
                     key="role.metadata.name"
@@ -163,7 +159,7 @@ <h3>
               <div
                 ng-if="mode.edit"
                 class="item-row form-new-role" row mobile="column">
-                <div class="col-name pad-bottom-none" row mobile="column" tablet="column">
+                <div class="col-name service-account" row mobile="column" tablet="column">
                   <label
                     ng-attr-for="newBindingName"
                     class="sr-only">
@@ -191,7 +187,7 @@ <h3>
                       theme="bootstrap"
                       search-enabled="true"
                       title="Select a project"
-                      class="select-role pad-bottom-sm">
+                      class="select-role">
                       <ui-select-match
                         placeholder="Select a project">
                         <span>{{newBinding.namespace}}</span>
@@ -207,7 +203,7 @@ <h3>
 
                   <span
                     ng-if="newBinding.kind === 'ServiceAccount'"
-                    class="mar-left-md mar-right-md hidden-xs">/</span>
+                    class="mar-left-md mar-right-md hidden-xs hidden-sm">/</span>
 
                   <!-- name entry/picker for service accounts -->
                   <div
@@ -232,10 +228,7 @@ <h3>
                     </ui-select>
                   </div>
                 </div>
-                <div
-                  class="action-set"
-                  flex row tablet="column" mobile="column">
-                  <div class="col-roles" flex row tablet="column">&nbsp;</div>
+                <div class="action-set">
                   <div class="col-add-role">
                     <div ng-show="mode.edit" row>
                       <ui-select
@@ -272,13 +265,9 @@ <h3>
 
             <div
               ng-if="mode.edit"
-              row mobile="column">
-              <div class="col-name hidden-xs">&nbsp;</div>
-              <div
-                class="action-set"
-                flex row tablet="column" mobile="column">
-                <div class="col-roles hidden-xs" flex>&nbsp;</div>
-                <div class="col-add-role" row>
+              class="show-hidden-roles">
+              <div class="action-set">
+                <div class="col-add-role">
                   <div class="checkbox">
                     <label>
                       <input
diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
index 99699f88fe..2b938f23d6 100644
--- a/dist/scripts/templates.js
+++ b/dist/scripts/templates.js
@@ -10630,20 +10630,20 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</p>\n" +
     "</div>\n" +
     "<div column class=\"content-pane\" ng-class=\"'content-' + subjectKind.name.toLowerCase()\">\n" +
-    "<div class=\"col-heading item-row\" row mobile=\"column\" flex-collapse-fix>\n" +
-    "<div class=\"col-name\" flex conceal=\"mobile\" ng-class=\"{ 'half-width': !mode.edit }\">\n" +
+    "<div class=\"col-heading\" flex-collapse-fix>\n" +
+    "<div class=\"col-name\" flex ng-class=\"{ 'half-width': !mode.edit }\">\n" +
     "<h3>Name</h3>\n" +
     "</div>\n" +
-    "<div class=\"col-roles\" flex conceal=\"mobile\">\n" +
+    "<div class=\"col-roles\" flex>\n" +
     "<h3>Roles</h3>\n" +
     "</div>\n" +
-    "<div ng-if=\"mode.edit\" class=\"col-add-role\" conceal=\"tablet\" flex-collapse-fix>\n" +
+    "<div ng-if=\"mode.edit\" class=\"col-add-role visible-md-block visible-lg-block\" flex-collapse-fix>\n" +
     "<h3>\n" +
     "Add Another Role\n" +
     "</h3>\n" +
     "</div>\n" +
     "</div>\n" +
-    "<div ng-if=\"(subjectKind.subjects | hashSize) === 0\">\n" +
+    "<div ng-if=\"(subjectKind.subjects | hashSize) === 0\" class=\"membership-empty\">\n" +
     "<p>\n" +
     "<em>There are no {{ subjectKind.name | humanizeKind }}s with access to this project.</em>\n" +
     "</p>\n" +
@@ -10667,8 +10667,8 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</span>\n" +
     "</span>\n" +
     "</div>\n" +
-    "<div class=\"action-set\" flex row tablet=\"column\" mobile=\"column\">\n" +
-    "<div class=\"col-roles\" row tablet=\"column\" flex wrap axis=\"start\">\n" +
+    "<div class=\"action-set\">\n" +
+    "<div class=\"col-roles\">\n" +
     "<action-chip ng-repeat=\"role in subject.roles\" key=\"role.metadata.name\" key-help=\"roleHelp(role)\" show-action=\"mode.edit\" action=\"confirmRemove(subject.name, subjectKind.name, role.metadata.name)\" action-title=\"Remove role {{role.metadata.name}} from {{subject.name}}\"></action-chip>\n" +
     "</div>\n" +
     "<div ng-if=\"mode.edit\" class=\"col-add-role\">\n" +
@@ -10693,7 +10693,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "<ng-form class=\"new-binding\" novalidate name=\"forms.newBindingForm\" ng-if=\"newBinding\">\n" +
     "<div ng-if=\"mode.edit\" class=\"item-row form-new-role\" row mobile=\"column\">\n" +
-    "<div class=\"col-name pad-bottom-none\" row mobile=\"column\" tablet=\"column\">\n" +
+    "<div class=\"col-name service-account\" row mobile=\"column\" tablet=\"column\">\n" +
     "<label ng-attr-for=\"newBindingName\" class=\"sr-only\">\n" +
     "Name\n" +
     "</label>\n" +
@@ -10701,7 +10701,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<input ng-if=\"newBinding.kind !== 'ServiceAccount'\" type=\"text\" class=\"form-control input-name\" placeholder=\"Name\" ng-model=\"newBinding.name\" autocorrect=\"off\" autocapitalize=\"none\" spellcheck=\"false\">\n" +
     "\n" +
     "<div ng-if=\"newBinding.kind === 'ServiceAccount'\" class=\"service-account-namespace\" aria-hidden=\"true\">\n" +
-    "<ui-select ng-model=\"newBinding.namespace\" on-select=\"selectProject($item, $model)\" theme=\"bootstrap\" search-enabled=\"true\" title=\"Select a project\" class=\"select-role pad-bottom-sm\">\n" +
+    "<ui-select ng-model=\"newBinding.namespace\" on-select=\"selectProject($item, $model)\" theme=\"bootstrap\" search-enabled=\"true\" title=\"Select a project\" class=\"select-role\">\n" +
     "<ui-select-match placeholder=\"Select a project\">\n" +
     "<span>{{newBinding.namespace}}</span>\n" +
     "</ui-select-match>\n" +
@@ -10710,7 +10710,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</ui-select-choices>\n" +
     "</ui-select>\n" +
     "</div>\n" +
-    "<span ng-if=\"newBinding.kind === 'ServiceAccount'\" class=\"mar-left-md mar-right-md hidden-xs\">/</span>\n" +
+    "<span ng-if=\"newBinding.kind === 'ServiceAccount'\" class=\"mar-left-md mar-right-md hidden-xs hidden-sm\">/</span>\n" +
     "\n" +
     "<div ng-if=\"newBinding.kind === 'ServiceAccount'\" class=\"service-account-name\">\n" +
     "<ui-select ng-model=\"newBinding.name\" theme=\"bootstrap\" search-enabled=\"true\" title=\"Select a service account\" class=\"select-role\">\n" +
@@ -10723,8 +10723,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</ui-select>\n" +
     "</div>\n" +
     "</div>\n" +
-    "<div class=\"action-set\" flex row tablet=\"column\" mobile=\"column\">\n" +
-    "<div class=\"col-roles\" flex row tablet=\"column\">&nbsp;</div>\n" +
+    "<div class=\"action-set\">\n" +
     "<div class=\"col-add-role\">\n" +
     "<div ng-show=\"mode.edit\" row>\n" +
     "<ui-select ng-if=\"filteredRoles.length\" ng-model=\"newBinding.newRole\" theme=\"bootstrap\" search-enabled=\"true\" title=\"new {{subjectKind.name}} role\" class=\"select-role\" flex>\n" +
@@ -10746,11 +10745,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</div>\n" +
     "</ng-form>\n" +
-    "<div ng-if=\"mode.edit\" row mobile=\"column\">\n" +
-    "<div class=\"col-name hidden-xs\">&nbsp;</div>\n" +
-    "<div class=\"action-set\" flex row tablet=\"column\" mobile=\"column\">\n" +
-    "<div class=\"col-roles hidden-xs\" flex>&nbsp;</div>\n" +
-    "<div class=\"col-add-role\" row>\n" +
+    "<div ng-if=\"mode.edit\" class=\"show-hidden-roles\">\n" +
+    "<div class=\"action-set\">\n" +
+    "<div class=\"col-add-role\">\n" +
     "<div class=\"checkbox\">\n" +
     "<label>\n" +
     "<input type=\"checkbox\" class=\"toggle-hidden\" ng-click=\"toggleRoles($event)\" ng-checked=\"toggle.roles\">\n" +
diff --git a/dist/styles/main.css b/dist/styles/main.css
index 923add5e3f..bdd7d4f7f9 100644
--- a/dist/styles/main.css
+++ b/dist/styles/main.css
@@ -3594,6 +3594,7 @@ table.dataTable thead .sorting_asc:after{content:"\f106";top:-3px}
 .toast-pf>.pficon:before{color:rgba(255,255,255,.74)}
 .toast-pf .toast-pf-action{margin-left:15px}
 .toast-pf .dropdown-kebab-pf .btn-link{padding-top:0;padding-bottom:0;vertical-align:text-bottom}
+.wizard-pf-substep-number,.wizard-pf-substep-title{vertical-align:middle;margin-right:5px;display:inline-block}
 .toast-pf-top-right{left:20px;position:absolute;right:20px;top:12px;z-index:1055}
 @media (min-width:992px){.toast-pf{display:inline-block}
 .toast-pf-max-width{max-width:31.1%}
@@ -3839,8 +3840,8 @@ table.dataTable thead .sorting_asc:after{content:"\f106";top:-3px}
 .wizard-pf-sidebar .list-group-item.active>a:before{content:" ";background:#39a5dc;height:100%;left:0;position:absolute;top:0;width:3px}
 .wizard-pf-sidebar .list-group-item.active>a:after{color:#39a5dc;content:"\f105";display:block;font-family:FontAwesome;font-size:24px;font-weight:500;line-height:30px;padding-top:10px;position:absolute;right:23px;top:0}
 }
-.wizard-pf-substep-number{display:inline-block;margin-right:5px;vertical-align:middle;width:25px}
-.wizard-pf-substep-title{display:inline-block;margin-right:5px;text-align:left;vertical-align:middle}
+.wizard-pf-substep-number{width:25px}
+.wizard-pf-substep-title{text-align:left}
 .wizard-pf-steps{border-bottom:solid 1px #d1d1d1}
 .wizard-pf-steps-indicator{background:#ededed;border-top:1px solid #d1d1d1;display:inline-block;display:flex;font-size:18px;list-style:none;margin-bottom:0;padding:15px 0}
 @media (min-width:768px){.wizard-pf-steps{text-align:center}
@@ -5450,7 +5451,7 @@ dl.secret-data pre{margin-bottom:0}
 .events-sidebar .events-sidebar-collapse a{text-decoration:none}
 .events-sidebar .sidebar-header.right-header{align-items:center;display:flex;justify-content:space-between;margin-top:17.5px}
 .events-sidebar .sidebar-header.right-header h2{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;margin-top:10.5px;margin-bottom:10.5px;font-size:14px;display:inline-block}
-.config-map-table .key,.config-map-table .truncated-content,.edit-yaml .ace_editor.editor,.log-view{font-family:Menlo,Monaco,Consolas,monospace}
+.config-map-table .key,.config-map-table .truncated-content,.log-view{font-family:Menlo,Monaco,Consolas,monospace}
 .events-sidebar .sidebar-header.right-header h2 .small,.events-sidebar .sidebar-header.right-header h2 small{font-weight:400;line-height:1;color:#9c9c9c;font-size:75%}
 .events-sidebar .sidebar-header.right-header .warning-count{white-space:nowrap;margin-left:2px}
 .events-sidebar .sidebar-header.right-header .warning-count .pficon{vertical-align:-1px}
@@ -5732,13 +5733,14 @@ alerts+.chromeless .log-loading-msg{margin-top:130px}
 .log-line-number:before{content:attr(data-line-number)}
 .log-line-number{-ms-user-select:none;border-right:1px #272b30 solid;padding-right:10px;vertical-align:top;white-space:nowrap;width:60px;color:#72767b}
 .log-line-text{padding:0 10px;white-space:pre-wrap;width:100%}
+.appended-icon,.project-date [am-time-ago],.projects-list [am-time-ago]{white-space:nowrap}
 .log-line-text::-moz-selection{color:#101214;background:#e5e5e5}
 .table-log-pods{background-color:#fff;border:1px solid #D1D1D1}
 .table-log-pods>tbody+tbody{border-top-width:1px}
 .log-fixed-height.empty-state-message{margin-top:0}
 .settings-item{margin:4px 8px 4px 0}
 .hide-if-empty:empty{display:none!important}
-.appended-icon{display:inline-block;white-space:nowrap}
+.appended-icon{display:inline-block}
 .block{display:block}
 .text-prepended-icon{align-items:baseline;display:flex}
 .nav-pf-vertical{background-color:#292e34;top:41px;transition:width .1s ease-in-out,left .1s ease-in-out;z-index:990}
@@ -5780,7 +5782,6 @@ alerts+.chromeless .log-loading-msg{margin-top:130px}
 @media (min-width:992px){.project-additional-info.list-view-pf-additional-info{width:55%}
 }
 .project-description.list-group-item-text,.project-info .list-view-pf-description{width:100%}
-.project-date [am-time-ago],.projects-list [am-time-ago]{white-space:nowrap}
 .project-description.list-group-item-text .highlighted-content,.project-description.list-group-item-text .truncated-content{display:block;white-space:pre-line;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;min-width:0}
 .project-info.list-group-item{border-bottom:0;border-color:#e0e0e0;padding:10px 20px}
 @media (min-width:992px){.project-name-item.list-group-item-heading{white-space:normal;width:45%}
@@ -5891,37 +5892,48 @@ kubernetes-container-terminal .terminal-actions .spinner{top:5px}
 .environment-from-editor .key-value-editor-input .ui-select+.ui-select,.key-value-editor .key-value-editor-input .ui-select+.ui-select{padding-top:0;padding-left:5px}
 }
 .key-value-editor .key-value-editor-input,.key-value-editor-header{float:left;margin-bottom:0;padding-right:5px;width:50%}
+.membership .content-pane,.membership .content-pane .col-add-role{width:100%}
 .environment-from-editor-entry-header,.key-value-editor-entry-header{padding-right:52px}
 .environment-from-editor-header,.key-value-editor-header{margin-bottom:5px}
-.membership h1 .learn-more-inline{white-space:nowrap;margin-right:10px;margin-left:0px;display:inline-block}
-.membership .content-pane .col-heading .col-add-role h3,.membership .content-pane .form-new-role .col-roles{display:none}
-.membership .content-pane{width:100%}
-.membership .content-pane .col-add-role{padding:10px 0;min-width:150px}
+.membership .action-set{display:flex;flex-direction:column;justify-content:space-between;width:100%}
+@media (min-width:768px){.membership .action-set{flex-wrap:nowrap}
+}
+@media (min-width:992px){.membership .action-set{flex-direction:row}
+}
 .membership .content-pane .add-role-to{margin-left:-1px}
-.membership .content-pane .col-heading,.membership .content-pane .item-row{border-bottom:1px solid #ededed}
-.membership .content-pane .col-heading h3,.membership .content-pane .item-row h3{margin:0}
-.membership .content-pane .item-row{padding:5px 10px 5px 5px;margin-bottom:20px}
-.membership .content-pane .col-heading{margin-bottom:20px}
-.membership .content-pane .col-name{word-break:break-all;word-break:break-word;overflow-wrap:break-word;width:100%;padding:0 0px 10px 0}
-.membership .content-pane .col-name.half-width{min-width:50%}
-.membership .content-pane .col-name input{max-width:150px}
+.membership .content-pane .col-heading{border-bottom:1px solid #ededed;display:none}
+@media (min-width:480px){.membership .content-pane .col-add-role{min-width:245px;width:auto}
+.membership .content-pane .col-heading{display:flex;margin:0}
+}
+.membership .content-pane .col-name{word-break:break-all;word-break:break-word;overflow-wrap:break-word;padding:0 0px 10px 0;width:100%}
+@media (min-width:480px){.membership .content-pane .col-name{max-width:30%;padding:0 5px 0 0}
+.container-pf-nav-pf-vertical.collapsed-nav .membership .content-pane .col-name{max-width:40%}
+.membership .content-pane .col-name input{max-width:225px}
+.membership .content-pane .item-row.highlight-hover:hover{background-color:#fafafa}
+}
+.membership .content-pane .col-name.half-width{max-width:50%}
 .membership .content-pane .col-name .new-project{margin-top:2px}
+.membership .content-pane .col-roles{display:flex;flex-wrap:wrap;padding-bottom:5px}
 .membership .content-pane .content-serviceaccount .form-new-role .col-roles{display:block}
-.membership .content-pane .input-name{width:150px;margin-bottom:5px}
+.membership .content-pane .form-new-role .col-roles{display:none}
+@media (min-width:992px){.membership .content-pane .col-roles{padding:0}
+.membership .content-pane .form-new-role .action-set{flex-direction:column}
+.membership .content-pane .form-new-role .action-set .col-add-role{align-self:flex-end}
+}
+.membership .content-pane .input-name{margin-bottom:5px}
+.membership .content-pane .item-row{border-bottom:1px solid #ededed;padding:10px 10px 10px 5px}
+.membership .content-pane .membership-empty{margin-top:20px}
+.membership .content-pane .show-hidden-roles .action-set{display:flex;flex-direction:row;justify-content:flex-end}
 .membership .content-pane .select-project{width:150px}
 .membership .content-pane .select-role small{color:#999;display:inline-block;line-height:1.4;white-space:pre-line}
 .membership .content-pane .select-role .active small{color:#c0e0f0}
-.membership .content-pane .col-add-role,.membership .content-pane .col-heading,.membership .content-pane .col-name,.membership .content-pane .col-roles,.membership .content-pane .item-row,.membership .content-pane [flex-collapse-fix],.membership .content-pane [flex]{flex-shrink:0;flex-basis:auto}
-.membership .ui-select-bootstrap>.ui-select-choices{max-height:300px}
-@media (min-width:480px){.membership .content-pane .col-heading .col-add-role h3,.membership .content-pane .form-new-role .col-roles{display:block}
-.membership .content-pane .col-add-role{padding:0;min-width:245px}
-.membership .content-pane .col-heading,.membership .content-pane .item-row{border-bottom:none;margin-bottom:none}
-.membership .content-pane .item-row.highlight-hover:hover{background-color:#fafafa}
-.membership .content-pane .col-heading .col-add-role a{display:block;padding-left:10px}
-.membership .content-pane .col-name{min-width:225px;max-width:30%;padding:0 5px 10px 0}
-.membership .content-pane .col-name input{max-width:175px}
-.membership .content-pane .select-role{width:150px}
+@media (max-width:991px){.membership .content-pane .service-account{flex-direction:column}
 }
+.membership .content-pane .service-account .select-role{padding-bottom:5px;width:auto}
+@media (min-width:992px){.membership .content-pane .service-account .select-role{width:150px}
+}
+.membership .content-pane .col-add-role,.membership .content-pane .col-heading,.membership .content-pane .col-name,.membership .content-pane .item-row,.membership .content-pane [flex-collapse-fix],.membership .content-pane [flex]{flex-shrink:0;flex-basis:auto}
+.membership .ui-select-bootstrap>.ui-select-choices{max-height:300px}
 notification-drawer-wrapper .blank-state-pf-title{font-size:14px}
 notification-drawer-wrapper .drawer-pf{height:calc(100vh - 69px);opacity:1;position:fixed;right:0;top:69px;transition:top 150ms ease-in-out,opacity 150ms;z-index:1028}
 @media (max-width:350px){notification-drawer-wrapper .drawer-pf{left:0;width:100%}
@@ -5978,7 +5990,7 @@ notification-drawer-wrapper .expanded-notification.unread .drawer-pf-notificatio
 .ace-inline{height:300px}
 .ace-inline-small{height:200px}
 .ace_editor.dockerfile-mode .ace_constant.ace_numeric,.editor.yaml-mode .ace_constant.ace_numeric{color:inherit}
-.edit-yaml .ace_editor.editor{line-height:1.5;width:100%;min-height:140px;height:50vh}
+.edit-yaml .ace_editor.editor{font-family:Menlo,Monaco,Consolas,monospace;line-height:1.5;width:100%;min-height:140px;height:50vh}
 @media (min-height:700px){.edit-yaml .ace_editor.editor{height:60vh}
 }
 .edit-yaml .ace_editor.editor .ace_gutter{color:#8b8d8f}