Fix alignment of resend button in members page

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/55869

2 files changed, 13 insertions, 54 deletions

diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 298610a0631..555a3fe0dc7 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -177,14 +177,6 @@ ul.content-list {
       }
     }
 
-    .member-controls {
-      float: none;
-
-      @include media-breakpoint-up(sm) {
-        float: right;
-      }
-    }
-
     // When dragging a list item
     &.ui-sortable-helper {
       border-bottom: 0;
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index f8e273a2735..68af01f9ccc 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -20,17 +20,6 @@
     }
   }
 
-  .list-item-name {
-    @include media-breakpoint-up(sm) {
-      float: left;
-      width: 50%;
-    }
-
-    strong {
-      font-weight: $gl-font-weight-bold;
-    }
-  }
-
   .controls {
     @include media-breakpoint-up(sm) {
       display: flex;
@@ -43,10 +32,11 @@
 
   .form-group {
     margin-bottom: 0;
+  }
 
-    @include media-breakpoint-down(sm) {
-      display: block;
-      margin-left: 5px;
+  .member-controls {
+    .fa {
+      line-height: inherit;
     }
   }
 
@@ -66,23 +56,12 @@
 }
 
 .member-form-control {
-  @include media-breakpoint-down(sm) {
-    width: $dropdown-member-form-control-width;
-    margin-left: 0;
-    padding-bottom: 5px;
-  }
-
   @include media-breakpoint-down(xs) {
     margin-right: 0;
     width: auto;
   }
 }
 
-.member-access-text {
-  margin-left: auto;
-  line-height: 43px;
-}
-
 .member-search-form {
   position: relative;
 
@@ -221,9 +200,6 @@
 }
 
 .content-list.members-list li {
-  display: flex;
-  justify-content: space-between;
-
   .list-item-name {
     float: none;
     display: flex;
@@ -252,33 +228,24 @@
     align-self: flex-start;
   }
 
+  @include media-breakpoint-down(sm) {
+    .member-access-text {
+      margin: 0 0 $gl-padding-4 ($grid-size * 6);
+    }
+  }
+
   @include media-breakpoint-down(xs) {
     display: block;
 
-    .controls > .btn {
-      margin-left: 0;
-      margin-right: 0;
+    .controls > .btn,
+    .controls .member-form-control {
+      margin: 0 0 $gl-padding-8;
       display: block;
     }
 
-    .controls > .btn:last-child {
-      margin-left: 5px;
-      margin-right: 5px;
-      width: auto;
-    }
-
     .form-control {
       width: 100%;
     }
-
-    .member-access-text {
-      line-height: 0;
-      margin-left: 50px;
-    }
-
-    .member-controls {
-      margin-top: 5px;
-    }
   }
 }