Merge branch '220971-group-list-view-user-profile-and-admin-css-regression' into 'master'

Fix user/admin group list view layout

See merge request gitlab-org/gitlab!34216

app/views/admin/groups/_group.html.haml

 - group = local_assigns.fetch(:group)
-- css_class = 'no-description' if group.description.blank?
+- css_class = "gl-display-flex!#{' no-description' if group.description.blank?}"
 
-%li.group-row.py-3{ class: css_class, data: { qa_selector: 'group_row_content' } }
-  .controls
-    = link_to _('Edit'), admin_group_edit_path(group), id: "edit_#{dom_id(group)}", class: 'btn'
-    = link_to _('Delete'), [:admin, group], data: { confirm: _("Are you sure you want to remove %{group_name}?") % { group_name: group.name } }, method: :delete, class: 'btn btn-remove'
-  .stats
+%li.group-row.gl-py-3.gl-align-items-center{ class: css_class, data: { qa_selector: 'group_row_content' } }
+  .avatar-container.rect-avatar.s40.gl-flex-shrink-0
+    = group_icon(group, class: "avatar s40")
+
+  .gl-min-w-0.gl-flex-grow-1
+    .title
+      = link_to [:admin, group], class: 'group-name', data: { qa_selector: 'group_name_link' } do
+        = group.full_name
+
+    - if group.description.present?
+      .description
+        = markdown_field(group, :description)
+
+  .stats.gl-text-gray-700.gl-flex-shrink-0.gl-display-none.gl-display-sm-flex
     %span.badge.badge-pill
       = storage_counter(group.storage_size)
 
-    = render_if_exists 'admin/namespace_plan_badge', namespace: group
-    = render_if_exists 'admin/groups/marked_for_deletion_badge', group: group
+    = render_if_exists 'admin/namespace_plan_badge', namespace: group, css_class: 'gl-ml-5 gl-mr-0'
+    = render_if_exists 'admin/groups/marked_for_deletion_badge', group: group, css_class: 'gl-ml-5'
 
-    %span
+    %span.gl-ml-5
       = icon('bookmark')
       = number_with_delimiter(group.projects.count)
 
-    %span
+    %span.gl-ml-5
       = icon('users')
       = number_with_delimiter(group.users.count)
 
-    %span.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group) }
+    %span.gl-ml-5.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group) }
       = visibility_level_icon(group.visibility_level, fw: false)
 
-  .avatar-container.rect-avatar.s40
-    = group_icon(group, class: "avatar s40 d-none d-sm-block")
-  .title
-    = link_to [:admin, group], class: 'group-name', data: { qa_selector: 'group_name_link' } do
-      = group.full_name
-
-  - if group.description.present?
-    .description
-      = markdown_field(group, :description)
+  .controls.gl-flex-shrink-0.gl-ml-5
+    = link_to _('Edit'), admin_group_edit_path(group), id: "edit_#{dom_id(group)}", class: 'btn'
+    = link_to _('Delete'), [:admin, group], data: { confirm: _("Are you sure you want to remove %{group_name}?") % { group_name: group.name } }, method: :delete, class: 'btn btn-remove'

app/views/shared/groups/_group.html.haml

 - user = local_assigns.fetch(:user, current_user)
 - access = user&.max_member_access_for_group(group.id)
 
-%li.group-row.py-3{ class: ('no-description' if group.description.blank?) }
-  .stats
-    %span
+%li.group-row.py-3.gl-align-items-center{ class: "gl-display-flex!#{' no-description' if group.description.blank?}" }
+  .avatar-container.rect-avatar.s40.gl-flex-shrink-0
+    = link_to group do
+      = group_icon(group, class: "avatar s40")
+  .gl-min-w-0.gl-flex-grow-1
+    .title
+      = link_to group.full_name, group, class: 'group-name'
+
+      - if access&.nonzero?
+        %span.user-access-role= Gitlab::Access.human_access(access)
+
+    - if group.description.present?
+      .description
+        = markdown_field(group, :description)
+
+  .stats.gl-text-gray-700.gl-flex-shrink-0
+    %span.gl-ml-5
       = icon('bookmark')
       = number_with_delimiter(group.projects.non_archived.count)
 
-    %span
+    %span.gl-ml-5
       = icon('users')
       = number_with_delimiter(group.users.count)
 
-    %span.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group) }
+    %span.gl-ml-5.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group) }
       = visibility_level_icon(group.visibility_level, fw: false)
-
-  .avatar-container.rect-avatar.s40
-    = link_to group do
-      = group_icon(group, class: "avatar s40")
-  .title
-    = link_to group.full_name, group, class: 'group-name'
-
-    - if access&.nonzero?
-      %span.user-access-role= Gitlab::Access.human_access(access)
-
-  - if group.description.present?
-    .description
-      = markdown_field(group, :description)

ee/app/views/admin/_namespace_plan_badge.html.haml

 - namespace = local_assigns.fetch(:namespace)
+- css_class = local_assigns.fetch(:css_class)
+
 - return unless Gitlab::CurrentSettings.should_check_namespace_plan? && namespace.actual_plan&.paid?
 
-%span.plan-badge.has-tooltip{ data: { plan: namespace.actual_plan_name }, title: "#{namespace.actual_plan.title} Plan" }
+%span.plan-badge.has-tooltip{ class: css_class, data: { plan: namespace.actual_plan_name }, title: "#{namespace.actual_plan.title} Plan" }
   = custom_icon('icon_premium')

ee/app/views/admin/groups/_marked_for_deletion_badge.html.haml

+- css_class = local_assigns.fetch(:css_class)
+
 - if group.marked_for_deletion?
-  %span.badge.badge-warning
+  %span.badge.badge-warning{ class: css_class }
     = _('pending removal')