[ADF-1995] [Mobile] Menu button is not displayed - portrait orientation

demo-shell/src/app/components/app-layout/app-layout.component.scss

@@ -3,6 +3,13 @@
   $minimumAppWidth: 320px;
   $toolbarHeight: 64px;
 
+
+   @media screen and ($mat-small) {
+       adf-search-bar {
+           width: 200px;
+       }
+   }
+
   .adf-app-layout {
     display: block;
     min-width: $minimumAppWidth;

lib/content-services/search/components/search-control.component.scss

@@ -6,7 +6,14 @@
     $mat-menu-border-radius: 2px !default;
 
     .adf-search-container {
-        overflow: hidden;
+        overflow: hidden !important;
+        adf-search-bar {
+            width: 200px;
+        }
+    }
+
+    .adf-search-button {
+        left: -13px;
     }
 
     .adf {
@@ -39,7 +46,6 @@
             background-color: mat-color($background, card);
             border-radius: $mat-menu-border-radius;
 
-
             @media screen and ($mat-small) {
                 width: 160px;
                 white-space: nowrap;

lib/content-services/search/components/search-control.component.ts

@@ -29,8 +29,8 @@ import 'rxjs/add/operator/distinctUntilChanged';
     styleUrls: ['./search-control.component.scss'],
     animations: [
         trigger('transitionMessages', [
-            state('active', style({ transform: 'translateX(0%)' })),
-            state('inactive', style({ transform: 'translateX(83%)', overflow: 'hidden' })),
+            state('active', style({ transform: 'translateX(0%)', 'margin-left': '13px' })),
+            state('inactive', style({ transform: 'translateX(81%)'})),
             state('no-animation', style({ transform: 'translateX(0%)', width: '100%' })),
             transition('inactive => active',
                 animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')),