Fix PeopleSearch and Help Desk header display problems

client/package-lock.json

@@ -17,9 +17,9 @@
       "dev": true
     },
     "@microfocus/ux-ias": {
-      "version": "1.0.0-alpha",
-      "resolved": "https://registry.npmjs.org/@microfocus/ux-ias/-/ux-ias-1.0.0-alpha.tgz",
-      "integrity": "sha1-8gWWdXoz4oyOYRQ/uy2eA8DIBaE=",
+      "version": "1.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/@microfocus/ux-ias/-/ux-ias-1.0.0-alpha.1.tgz",
+      "integrity": "sha1-7ygUnVgpAH5xKFwysdnGeNytpKA=",
       "dev": true
     },
     "@types/angular": {

client/src/helpdesk/helpdesk-detail.component.scss

@@ -21,8 +21,8 @@
  */
 
 help-desk-detail {
-  .page-content-title {
-    margin-right: 20px;
+  #page-content-title {
+    margin-bottom: 0;
   }
 
   .ias-tile {

client/src/helpdesk/helpdesk-search-cards.component.html

@@ -25,6 +25,8 @@
     <ias-search-box ng-model="$ctrl.query" ng-model-options="{debounce: $ctrl.inputDebounce}"
                     placeholder="{{'Placeholder_Search' | translate}}" auto-focus>
     </ias-search-box>
+    <ias-button class="verifications-button ias-cta" ng-if="$ctrl.verificationsEnabled"
+                ng-click="$ctrl.showVerifications()">{{ 'Button_Verifications' | translate }}</ias-button>
 
     <span class="ias-fill"></span>
 
@@ -41,11 +43,6 @@
 </div>
 
 <div class="search-info-container">
-    <div>
-        <ias-button class="verifications-button ias-cta" ng-if="$ctrl.verificationsEnabled"
-                    ng-click="$ctrl.showVerifications()">{{ 'Button_Verifications' | translate }}</ias-button>
-    </div>
-
     <div class="search-info" ng-class="{'loading': !$ctrl.getMessage()}"
          ng-if="$ctrl.loading || $ctrl.searchMessage || $ctrl.errorMessage"
          ng-bind="$ctrl.getMessage() || ('Display_PleaseWait' | translate)">

client/src/helpdesk/helpdesk-search-table.component.html

@@ -25,6 +25,8 @@
     <ias-search-box ng-model="$ctrl.query" ng-model-options="{debounce: $ctrl.inputDebounce}"
                     placeholder="{{'Placeholder_Search' | translate}}" auto-focus>
     </ias-search-box>
+    <ias-button class="verifications-button ias-cta" ng-if="$ctrl.verificationsEnabled"
+                ng-click="$ctrl.showVerifications()">{{ 'Button_Verifications' | translate }}</ias-button>
 
     <span class="ias-fill"></span>
 
@@ -53,11 +55,6 @@
 </div>
 
 <div class="search-info-container">
-    <div>
-        <ias-button class="verifications-button ias-cta" ng-if="$ctrl.verificationsEnabled"
-                    ng-click="$ctrl.showVerifications()">{{ 'Button_Verifications' | translate }}</ias-button>
-    </div>
-
     <div class="search-info" ng-class="{'loading': !$ctrl.getMessage()}"
          ng-if="$ctrl.loading || $ctrl.searchMessage || $ctrl.errorMessage"
          ng-bind="$ctrl.getMessage() || ('Display_PleaseWait' | translate)">

client/src/helpdesk/helpdesk-search.component.scss

@@ -22,7 +22,7 @@
 
 
 .verifications-button {
-  margin-bottom: 15px;
+  margin: 5px 5px 5px 0;
 }
 
 help-desk-search-cards,
@@ -31,6 +31,10 @@ help-desk-search-table {
   flex-flow: column nowrap;
   height: 100%;
 
+  #page-content-title {
+    margin-bottom: 0;
+  }
+
   > .people-search-component-content {
     flex: 1 1;
     overflow: auto;

client/src/peoplesearch/orgchart-search.component.scss

@@ -22,6 +22,10 @@
 
 
 org-chart-search {
+  #page-content-title {
+    margin-bottom: 0;
+  }
+
   display: flex;
   flex-flow: column nowrap;
   height: 100%;

client/src/peoplesearch/peoplesearch-cards.component.scss

@@ -21,6 +21,10 @@
  */
 
 people-search-cards {
+  #page-content-title {
+    margin-bottom: 0;
+  }
+
   display: flex;
   flex-flow: column nowrap;
   height: 100%;

client/src/peoplesearch/peoplesearch-table.component.scss

@@ -22,6 +22,10 @@
 
 
 people-search-table {
+    #page-content-title {
+        margin-bottom: 0;
+    }
+
     display: flex;
     flex-flow: column nowrap;
     height: 100%;

server/src/main/webapp/public/resources/mobileStyle.css

@@ -104,7 +104,8 @@ progress .wait {
 
 .dialogBody.orgChart { width: 100%; max-width: 100%; }
 
-.peoplesearch-wrapper #centerbody.wide {
+.peoplesearch-wrapper #centerbody.wide,
+.helpdesk-wrapper #centerbody.wide {
     bottom: 80px;
     height: auto !important;
     left: 0;