Fix alignment of resend button in members page

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

5 files changed, 45 insertions, 76 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;
-    }
   }
 }
 
diff --git a/app/views/shared/members/_group.html.haml b/app/views/shared/members/_group.html.haml
index 9ec76d82d18..e83ca5eaab8 100644
--- a/app/views/shared/members/_group.html.haml
+++ b/app/views/shared/members/_group.html.haml
@@ -2,9 +2,12 @@
 - group = group_link.group
 - can_admin_member = can?(current_user, :admin_project_member, @project)
 - dom_id = "group_member_#{group_link.id}"
-%li.member.group_member{ id: dom_id }
-  %span.list-item-name
-    = group_icon(group, class: "avatar s40", alt: '')
+
+-# Note this is just for groups. For individual members please see shared/members/_member
+
+%li.member.group_member.py-2.px-3.d-flex.flex-column.flex-md-row{ id: dom_id }
+  %span.list-item-name.mb-2.m-md-0
+    = group_icon(group, class: "avatar s40 flex-shrink-0 flex-grow-0", alt: '')
     .user-info
       = link_to group.full_name, group_path(group), class: 'member'
       .cgray
@@ -13,10 +16,10 @@
           ·
           %span{ class: ('text-warning' if group_link.expires_soon?) }
             = _("Expires in %{expires_at}").html_safe % { expires_at: distance_of_time_in_words_to_now(group_link.expires_at) }
-  .controls.member-controls
-    = form_tag project_group_link_path(@project, group_link), method: :put, remote: true, class: 'js-edit-member-form form-group row append-right-5' do
+  .controls.member-controls.align-items-center
+    = form_tag project_group_link_path(@project, group_link), method: :put, remote: true, class: 'js-edit-member-form form-group d-sm-flex' do
       = hidden_field_tag "group_link[group_access]", group_link.group_access
-      .member-form-control.dropdown.append-right-5
+      .member-form-control.dropdown.mr-sm-2.d-sm-inline-block
         %button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button",
           disabled: !can_admin_member,
           data: { toggle: "dropdown", field_name: "group_link[group_access]" } }
@@ -32,14 +35,14 @@
                   = link_to role, "javascript:void(0)",
                     class: ("is-active" if group_link.group_access == role_id),
                     data: { id: role_id, el_id: dom_id }
-      .prepend-left-5.clearable-input.member-form-control
+      .clearable-input.member-form-control.d-sm-inline-block
         = text_field_tag 'group_link[expires_at]', group_link.expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: _('Expiration date'), id: "member_expires_at_#{group.id}", disabled: !can_admin_member
         %i.clear-icon.js-clear-input
     - if can_admin_member
       = link_to project_group_link_path(@project, group_link),
         method: :delete,
         data: { confirm: _("Are you sure you want to remove %{group_name}?") % { group_name: group.name } },
-        class: 'btn btn-remove prepend-left-10' do
+        class: 'btn btn-remove m-0 ml-sm-2 align-self-center' do
         %span.d-block.d-sm-none
           = _("Delete")
         = icon('trash', class: 'd-none d-sm-block')
diff --git a/app/views/shared/members/_member.html.haml b/app/views/shared/members/_member.html.haml
index afcb2b71472..331283f7eec 100644
--- a/app/views/shared/members/_member.html.haml
+++ b/app/views/shared/members/_member.html.haml
@@ -6,10 +6,12 @@
 - source = member.source
 - override = member.try(:override)
 
-%li.member{ class: [dom_class(member), ("is-overridden" if override)], id: dom_id(member) }
-  %span.list-item-name
+-# Note this is just for individual members. For groups please see shared/members/_group
+
+%li.member.py-2.px-3.d-flex.flex-column{ class: [dom_class(member), ("is-overridden" if override), ("flex-md-row" unless force_mobile_view)], id: dom_id(member) }
+  %span.list-item-name.mb-2.m-md-0
     - if user
-      = image_tag avatar_icon_for_user(user, 40), class: "avatar s40", alt: ''
+      = image_tag avatar_icon_for_user(user, 40), class: "avatar s40 flex-shrink-0 flex-grow-0", alt: ''
       .user-info
         = link_to user.name, user_path(user), class: 'member js-user-link', data: { user_id: user.id }
         = user_status(user)
@@ -43,7 +45,7 @@
               = _("Expires in %{expires_at}").html_safe % { expires_at: distance_of_time_in_words_to_now(member.expires_at) }
 
     - else
-      = image_tag avatar_icon_for_email(member.invite_email, 40), class: "avatar s40", alt: ''
+      = image_tag avatar_icon_for_email(member.invite_email, 40), class: "avatar s40 flex-shrink-0 flex-grow-0", alt: ''
       .user-info
         .member= member.invite_email
         .cgray
@@ -54,20 +56,20 @@
           = time_ago_with_tooltip(member.created_at)
   - if show_roles
     - current_resource = @project || @group
-    .controls.member-controls
+    .controls.member-controls.align-items-center
       = render_if_exists 'shared/members/ee/ldap_tag', can_override: member.can_override?
       - if show_controls && member.source == current_resource
 
         - if member.can_resend_invite?
           = link_to icon('paper-plane'), polymorphic_path([:resend_invite, member]),
                     method: :post,
-                    class: 'btn btn-default prepend-left-10 d-none d-sm-block',
+                    class: 'btn btn-default align-self-center mr-sm-2',
                     title: _('Resend invite')
 
         - if user != current_user && member.can_update?
-          = form_for member, remote: true, html: { class: 'js-edit-member-form form-group row append-right-5' } do |f|
+          = form_for member, remote: true, html: { class: "js-edit-member-form form-group #{'d-sm-flex' unless force_mobile_view}" } do |f|
             = f.hidden_field :access_level
-            .member-form-control.dropdown.append-right-5
+            .member-form-control.dropdown{ class: [("mr-sm-2 d-sm-inline-block" unless force_mobile_view)] }
               %button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button",
                 disabled: member.can_override? && !override,
                 data: { toggle: "dropdown", field_name: "#{f.object_name}[access_level]" } }
@@ -87,7 +89,7 @@
                       group: @group,
                       member: member,
                       can_override: member.can_override?
-            .prepend-left-5.clearable-input.member-form-control
+            .clearable-input.member-form-control{ class: [("d-sm-inline-block" unless force_mobile_view)] }
               = f.text_field :expires_at,
                 disabled: member.can_override? && !override,
                 class: 'form-control js-access-expiration-date js-member-update-control',
@@ -96,12 +98,12 @@
                 data: { el_id: dom_id(member) }
               %i.clear-icon.js-clear-input
         - else
-          %span.member-access-text= member.human_access
+          %span.member-access-text.user-access-role= member.human_access
 
         - if member.can_approve?
           = link_to polymorphic_path([:approve_access_request, member]),
                     method: :post,
-                    class: 'btn btn-success prepend-left-10',
+                    class: "btn btn-success align-self-center m-0 mb-2 #{'mb-sm-0 ml-sm-2' unless force_mobile_view}",
                     title: _('Grant access') do
             %span{ class: ('d-block d-sm-none' unless force_mobile_view) }
               = _('Grant access')
@@ -113,12 +115,12 @@
             = link_to icon('sign-out', text: _('Leave')), polymorphic_path([:leave, member.source, :members]),
                       method: :delete,
                       data: { confirm: leave_confirmation_message(member.source) },
-                      class: 'btn btn-remove prepend-left-10'
+                      class: "btn btn-remove align-self-center m-0 #{'ml-sm-2' unless force_mobile_view}"
           - else
             = link_to member,
                       method: :delete,
                       data: { confirm: remove_member_message(member) },
-                      class: 'btn btn-remove prepend-left-10',
+                      class: "btn btn-remove align-self-center m-0 #{'ml-sm-2' unless force_mobile_view}",
                       title: remove_member_title(member) do
               %span{ class: ('d-block d-sm-none' unless force_mobile_view) }
                 = _("Delete")
@@ -126,6 +128,6 @@
                 = icon('trash', class: 'd-none d-sm-block')
         = render_if_exists 'shared/members/ee/override_member_buttons', group: @group, member: member, user: user, action: :edit, can_override: member.can_override?
       - else
-        %span.member-access-text= member.human_access
+        %span.member-access-text.user-access-role= member.human_access
 
 = render_if_exists 'shared/members/ee/override_member_buttons', group: @group, member: member, user: user, action: :confirm, can_override: member.can_override?
diff --git a/changelogs/unreleased/sh-fix-issue-55869.yml b/changelogs/unreleased/sh-fix-issue-55869.yml
new file mode 100644
index 00000000000..7935cffc13b
--- /dev/null
+++ b/changelogs/unreleased/sh-fix-issue-55869.yml
@@ -0,0 +1,5 @@
+---
+title: Fix alignment of resend button in members page
+merge_request: 28202
+author:
+type: other