Added flex wrapping

app/assets/stylesheets/framework/common.scss

@@ -425,13 +425,6 @@ table {
 }
 .str-truncated {
-  &-30 {
-    @include str-truncated(30%);
-    @media (max-width: $screen-xs-max){
-      max-width: 90%;
-    }
-  }
-
   &-60 {
     @include str-truncated(60%);
   }

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

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

 .panel.panel-default
-  .panel-heading
-    %span.str-truncated-30
+  .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" }