fix search button + fix css mobile issue (content out of box)

src/frontend/app/header/header-right.component.html

 <div class="bg-head-title-tool">
-    <button mat-icon-button *ngIf="!mobileMode">
+    <form *ngIf="!hideSearch" ngNoForm style="height: 40px;" name="choose_query" id="choose_query" method="post"
+        action="index.php?display=true&amp;dir=indexing_searching&amp;page=search_adv_result">
+        <input type="hidden" name="meta[]" value="baskets_clause#baskets_clause#select_simple">
+        <input type="hidden" name="meta[]" value="welcome#welcome#welcome">
+        <input type="hidden" name="baskets_clause" value="true">
+        <mat-form-field id="searchInput" floatLabel="never" style="width:100%;margin-top: -18px;margin-left:-5px;">
+            <input matInput type="text" (blur)="hideSearch = !hideSearch" name="welcome" placeholder="{{lang.searchMails}}">
+            <button mat-icon-button matSuffix *ngIf="!mobileMode" style="opacity:0.5;">
+                <mat-icon class="fa fa-search" style="font-size:22px;"></mat-icon>
+            </button>
+        </mat-form-field>
+        <input #searchHome type="submit" name="submit" value="" style="display:none">
+    </form>
+
+    <button (click)="hideSearch = !hideSearch" mat-icon-button *ngIf="!mobileMode && hideSearch" style="opacity:0.5;">
         <mat-icon class="fa fa-search" style="font-size:22px;"></mat-icon>
     </button>
+
+
     <button mat-icon-button [matMenuTriggerFor]="applications" *ngIf="!mobileMode" matTooltip="{{lang.menu}}">
         <mat-icon class="fa fa-th" style="font-size:22px;"></mat-icon>
     </button>
@@ -14,9 +30,9 @@
             </button>
         </ng-container>
     </mat-menu>
-    <button *ngIf="!mobileMode" mat-button  [matMenuTriggerFor]="menu">
+    <button *ngIf="!mobileMode" mat-button [matMenuTriggerFor]="menu">
         <mat-icon mat-list-icon class="fa fa-user fa-2x" style="color:white; margin:0px 12px 8px 0px;"></mat-icon>
-            {{headerService.user.firstname | titlecase }} <b>{{headerService.user.lastname | uppercase}}</b>
+        {{headerService.user.firstname | titlecase }} <b>{{headerService.user.lastname | uppercase}}</b>
     </button>
     <button *ngIf="mobileMode" mat-icon-button [matMenuTriggerFor]="menu">
         <mat-icon mat-list-icon class="fa fa-user fa-2x" style="color:white;height: auto;"></mat-icon>

src/frontend/app/header/header-right.component.scss

+.bg-head-title-tool {
+    display: flex;
+
+    ::ng-deep.mat-form-field-label-wrapper {
+        font-style: italic;
+    }
+
+    ::ng-deep .mat-form-field-label {
+        color: white;
+    }
+}
\ No newline at end of file

src/frontend/app/header/header-right.component.ts

@@ -21,6 +21,8 @@ export class HeaderRightComponent implements OnInit {
     dialogRef   : MatDialogRef<any>;
     config      : any       = {};
 
+    hideSearch : boolean = true;
+
     constructor(public http: HttpClient, private router: Router, public headerService: HeaderService, public dialog: MatDialog) {
         this.mobileMode = angularGlobals.mobileMode;
      }

src/frontend/css/engine_2.scss

 /******* CSS ACCORDING TO FINAL CSS *********/
+html,body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
 .example-container {
     position: absolute !important;
     top: 0;