[ACA-1968] style search input for smaller screens (#833)

* [ACA-1968] more friendly small screen style

* [ACA-1968] media queries

* [ACA-1968] fix margin

* [ACA-1968] small fixes

* [ACA-1968] cleanup unused code

src/app/components/header/header.component.html

@@ -6,11 +6,11 @@
   [title]="appName$ | async"
   (clicked)="toggleClicked.emit($event)">
 
-  <div class="adf-toolbar--spacer"></div>
+  <div class="adf-toolbar--spacer adf-toolbar-divider"></div>
 
-  <ng-container *ngIf="!isSmallScreen">
-    <aca-search-input></aca-search-input>
-  </ng-container>
+  <aca-search-input></aca-search-input>
+
+  <div class="adf-toolbar-divider"></div>
 
   <aca-current-user></aca-current-user>
 

src/app/components/header/header.component.ts

@@ -37,7 +37,6 @@ import {
   selectAppName,
   selectLogoPath
 } from '../../store/selectors/app.selectors';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { ContentActionRef } from '@alfresco/adf-extensions';
 import { AppExtensionService } from '../../extensions/extension.service';
 import { AppStore } from '../../store/states';
@@ -56,12 +55,10 @@ export class AppHeaderComponent implements OnInit {
   headerColor$: Observable<string>;
   logo$: Observable<string>;
 
-  isSmallScreen = false;
   actions: Array<ContentActionRef> = [];
 
   constructor(
     store: Store<AppStore>,
-    private breakpointObserver: BreakpointObserver,
     private appExtensions: AppExtensionService
   ) {
     this.headerColor$ = store.select(selectHeaderColor);
@@ -71,12 +68,6 @@ export class AppHeaderComponent implements OnInit {
 
   ngOnInit() {
     this.actions = this.appExtensions.getHeaderActions();
-
-    this.breakpointObserver
-      .observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape])
-      .subscribe(result => {
-        this.isSmallScreen = result.matches;
-      });
   }
 
   trackByActionId(index: number, action: ContentActionRef) {