Fix alignment of admin members pagesh-fix-issue-55869

3 files changed, 10 insertions, 14 deletions

diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index adc155827e4..68af01f9ccc 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -216,10 +216,6 @@
     word-break: break-all;
   }
 
-  img {
-    min-width: 40px;
-  }
-
   .member-group-link {
     display: inline-block;
   }
diff --git a/app/views/shared/members/_group.html.haml b/app/views/shared/members/_group.html.haml
index bdcfee98ef8..e83ca5eaab8 100644
--- a/app/views/shared/members/_group.html.haml
+++ b/app/views/shared/members/_group.html.haml
@@ -7,7 +7,7 @@
 
 %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", alt: '')
+    = 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
diff --git a/app/views/shared/members/_member.html.haml b/app/views/shared/members/_member.html.haml
index 2a6398158c5..331283f7eec 100644
--- a/app/views/shared/members/_member.html.haml
+++ b/app/views/shared/members/_member.html.haml
@@ -8,10 +8,10 @@
 
 -# Note this is just for individual members. For groups please see shared/members/_group
 
-%li.member.py-2.px-3.d-flex.flex-column.flex-md-row{ class: [dom_class(member), ("is-overridden" if override)], id: dom_id(member) }
+%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)
@@ -45,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
@@ -67,9 +67,9 @@
                     title: _('Resend invite')
 
         - if user != current_user && member.can_update?
-          = form_for member, remote: true, html: { class: 'js-edit-member-form form-group d-sm-flex' } 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.mr-sm-2.d-sm-inline-block
+            .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]" } }
@@ -89,7 +89,7 @@
                       group: @group,
                       member: member,
                       can_override: member.can_override?
-            .clearable-input.member-form-control.d-sm-inline-block
+            .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',
@@ -103,7 +103,7 @@
         - if member.can_approve?
           = link_to polymorphic_path([:approve_access_request, member]),
                     method: :post,
-                    class: 'btn btn-success align-self-center mb-2 mb-sm-0 m-0 ml-sm-2',
+                    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')
@@ -115,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 align-self-center m-0 ml-sm-2'
+                      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 align-self-center m-0 ml-sm-2',
+                      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")