Merge branch '26883-members-page-layout-looks-broken' into 'master'

Added UX improvements to the project members settings view

Closes #26883

See merge request !8650

4 files changed, 68 insertions, 4 deletions

diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index be7193bae04..8dbac76e30a 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -133,3 +133,55 @@
     right: 160px;
   }
 }
+
+.flex-project-members-panel {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  @media (max-width: $screen-sm-min) {
+    display: block;
+
+    .flex-project-title {
+      vertical-align: top;
+      display: inline-block;
+      max-width: 90%;
+    }
+  }
+
+  .flex-project-title {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .badge {
+    height: 17px;
+    line-height: 16px;
+    margin-right: 5px;
+    padding-top: 1px;
+    padding-bottom: 1px;
+  }
+
+  .flex-project-members-form {
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    margin-left: auto;
+  }
+}
+
+.panel {
+  .panel-heading {
+    .badge {
+      margin-top: 0;
+    }
+
+    @media (max-width: $screen-sm-min) {
+      .badge {
+        margin-right: 0;
+        margin-left: 0;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/views/projects/project_members/_index.html.haml b/app/views/projects/project_members/_index.html.haml
index ab0771b5751..f83521052ed 100644
--- a/app/views/projects/project_members/_index.html.haml
+++ b/app/views/projects/project_members/_index.html.haml
@@ -6,6 +6,12 @@
       %p
         Add a new member to
         %strong= @project.name
+    - else
+      %p
+        Members can be added by project
+        %i Masters
+        or
+        %i Owners
   .col-lg-9
     .light.prepend-top-default
       - if can?(current_user, :admin_project_member, @project)
diff --git a/app/views/projects/project_members/_team.html.haml b/app/views/projects/project_members/_team.html.haml
index 81d57c77edf..7b1a26043e1 100644
--- a/app/views/projects/project_members/_team.html.haml
+++ b/app/views/projects/project_members/_team.html.haml
@@ -1,9 +1,11 @@
 .panel.panel-default
-  .panel-heading
-    Members with access to
-    %strong= @project.name
+  .panel-heading.flex-project-members-panel
+    %span.flex-project-title
+      Members of
+      %strong
+        #{@project.name}
     %span.badge= @project_members.total_count
-    = form_tag namespace_project_settings_members_path(@project.namespace, @project), method: :get, class: 'form-inline member-search-form'  do
+    = form_tag namespace_project_settings_members_path(@project.namespace, @project), method: :get, class: 'form-inline member-search-form flex-project-members-form'  do
       .form-group
         = search_field_tag :search, params[:search], { placeholder: 'Find existing members by name', class: 'form-control', spellcheck: false }
         %button.member-search-btn{ type: "submit", "aria-label" => "Submit search" }
diff --git a/changelogs/unreleased/26883-members-page-layout-looks-broken.yml b/changelogs/unreleased/26883-members-page-layout-looks-broken.yml
new file mode 100644
index 00000000000..e0e3a529c3e
--- /dev/null
+++ b/changelogs/unreleased/26883-members-page-layout-looks-broken.yml
@@ -0,0 +1,4 @@
+---
+title: Improved UX on project members settings view
+merge_request:
+author: