Changed the way to truncate the panel to title from ruby to a scss mixin

app/assets/stylesheets/framework/common.scss

@@ -425,6 +425,10 @@ table {
 }
 
 .str-truncated {
+  &-30 {
+    @include str-truncated(30%);
+  }
+
   &-60 {
     @include str-truncated(60%);
   }

app/views/projects/project_members/_team.html.haml

 .panel.panel-default
   .panel-heading
-    Members with access to
-    %strong= @project.name
+    %span.str-truncated-30
+      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-group

changelogs/unreleased/26883-members-page-layout-looks-broken.yml

+---
+title: Improved UX on project members settings view
+merge_request:
+author: