Make the new team view UI to be properly reactive to the screen size

static/css/quay.css

@@ -4633,8 +4633,12 @@ i.quay-icon {
   background: white;
 }
 
-.organization-header .popover-content .help-text {
+.team-view-add-element .help-text {
   font-size: 13px;
   color: #ccc;
   margin-top: 10px;
 }
+
+.organization-header .popover-content {
+  min-width: 500px;
+}

static/directives/team-view-add.html

@@ -1,4 +1,4 @@
-<div style="width: 500px">
+<div class="team-view-add-element">
   <div class="entity-search"
        namespace="orgname" placeholder="'Add a registered user or robot...'"
        entity-selected="addNewMember(entity)"

static/partials/team-view.html

@@ -2,6 +2,7 @@
   <div class="team-view container">
     <div class="organization-header" organization="organization" team-name="teamname">
       <div ng-show="canEditMembers" class="side-controls">
+        <div class="hidden-sm hidden-xs">
         <button class="btn btn-success" data-trigger="click"
                 data-title="Add Team Member"
                 data-content-template="/static/directives/team-view-add.html" 
@@ -12,6 +13,7 @@
         </button>
         </div>
       </div>
+    </div>
     
     <div class="resource-view" resource="membersResource" error-message="'No matching team found'">
       <div class="description markdown-input" content="team.description" can-write="organization.is_admin"
@@ -69,6 +71,13 @@
           </td>
         </tr>
       </table>
+
+      <div ng-show="canEditMembers">
+        <div class="visible-xs visible-sm">
+          <div ng-include="'/static/directives/team-view-add.html'"></div>
+        </div>
+      </div>
+
     </div>
   </div>
 </div>