ng-include was breaking things, so we create a new ng-if to match based on media queries

static/css/quay.css

@@ -4615,30 +4615,30 @@ i.quay-icon {
   display: inline-block;
 }
 
-.organization-header .popover {
+.team-view .organization-header .popover {
   max-width: none !important;
 }
 
-.organization-header .popover.bottom-right .arrow:after {
+.team-view .organization-header .popover.bottom-right .arrow:after {
   border-bottom-color: #f7f7f7;
   top: 2px;
 }
 
-.organization-header .popover-content {
+.team-view .organization-header .popover-content {
   font-size: 14px;
   padding-top: 6px;
 }
 
-.organization-header .popover-content input {
+.team-view .organization-header .popover-content input {
   background: white;
 }
 
-.team-view-add-element .help-text {
+.team-view .team-view-add-element .help-text {
   font-size: 13px;
   color: #ccc;
   margin-top: 10px;
 }
 
-.organization-header .popover-content {
+.team-view .organization-header .popover-content {
   min-width: 500px;
 }

static/js/app.js

@@ -1811,6 +1811,19 @@ quayApp.directive('quayShow', function($animate, Features, Config) {
 });
 
 
+quayApp.directive('ngIfMedia', function ($animate) {
+  return {
+    transclude: 'element',
+    priority: 600,
+    terminal: true,
+    restrict: 'A',
+    link: buildConditionalLinker($animate, 'ngIfMedia', function(value) {
+      return window.matchMedia(value).matches;
+    })
+  };
+});
+
+
 quayApp.directive('quaySection', function($animate, $location, $rootScope) {
   return {
     priority: 590,

static/partials/team-view.html

@@ -73,7 +73,7 @@
       </table>
 
       <div ng-show="canEditMembers">
-        <div class="visible-xs visible-sm">
+        <div ng-if-media="'(max-width: 560px)'">
           <div ng-include="'/static/directives/team-view-add.html'"></div>
         </div>
       </div>