Fix alignment of resend button in members page

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

2 files changed, 27 insertions, 22 deletions

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?