Make app bar have extra spacing at larger widths in PeopleSearch/OrgChart

src/main/angular/src/peoplesearch/orgchart-search.component.html

@@ -22,7 +22,6 @@
 
 <mf-app-bar>
     <div id="page-content-title" translate="Title_Organization">Organization</div>
-    <span flex class="search-bar-spacing"></span>
     <mf-auto-complete search-text="$ctrl.query"
                       on-search-text-change="$ctrl.onSearchTextChange(value)"
                       search="$ctrl.autoCompleteSearch(query)"

src/main/angular/src/peoplesearch/peoplesearch-cards.component.html

@@ -22,7 +22,6 @@
 
 <mf-app-bar>
     <div id="page-content-title" translate="Title_PeopleSearch">People Search</div>
-    <span flex class="search-bar-spacing"></span>
     <mf-search-bar input-debounce="$ctrl.inputDebounce"
                    search-text="$ctrl.query"
                    on-search-text-change="$ctrl.onSearchTextChange(value)"

src/main/angular/src/peoplesearch/peoplesearch-table.component.html

@@ -22,7 +22,6 @@
 
 <mf-app-bar>
     <div id="page-content-title" translate="Title_PeopleSearch">People Search</div>
-    <span flex class="search-bar-spacing"></span>
     <mf-search-bar input-debounce="$ctrl.inputDebounce"
                    search-text="$ctrl.query"
                    on-search-text-change="$ctrl.onSearchTextChange(value)"

src/main/angular/src/ux/app-bar.component.scss

@@ -42,6 +42,16 @@ mf-app-bar {
     }
   }
 
+  // For extra-large displays, add extra spacing around search bar
+  &.extra-large {
+    > .mf-app-bar-content {
+      > mf-auto-complete,
+      > mf-search-bar {
+        margin: 0 30px;
+      }
+    }
+  }
+
   > .mf-app-bar-content {
     display: flex;
     flex-flow: row wrap;
@@ -58,10 +68,6 @@ mf-app-bar {
     > span[flex] {
       display: inline-block;
       flex: 1 1;
-
-      &.search-bar-spacing {
-        max-width: 20px;
-      }
     }
 
     > #page-content-title {

src/main/angular/src/ux/app-bar.component.ts

@@ -26,7 +26,8 @@ import { IAugmentedJQuery } from 'angular';
 import ElementSizeService from './element-size.service';
 
 export enum AppBarSize {
-    Large = 413
+    Large = 413,
+    ExtraLarge = 473
 }
 
 @Component({