Improvement view on mobile device

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar color="primary">
   <h2 translate>audit-log.audit-log-details</h2>
   <span fxFlex></span>
   <button mat-button mat-icon-button
@@ -33,10 +33,8 @@
   <div #failureDetailsEditor [fxShow]="displayFailureDetails" class="tb-audit-log-failure-details">
   </div>
 </div>
-<div mat-dialog-actions fxLayout="row">
-  <span fxFlex></span>
+<div mat-dialog-actions fxLayoutAlign="end center">
   <button mat-button color="primary"
-          style="margin-right: 20px;"
           type="button"
           [disabled]="(isLoading$ | async)"
           [mat-dialog-close]="false" cdkFocusInitial>

@@ -33,7 +33,7 @@
   </mat-drawer>
   <mat-drawer-content>
     <div class="mat-padding tb-entity-table tb-absolute-fill">
-      <div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
+      <div fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
         <mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
             <span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
@@ -41,10 +41,9 @@
             <tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
                             (ngModelChange)="onTimewindowChange()"
                             asButton historyOnly></tb-timewindow>
-            <span fxFlex *ngIf="!entitiesTableConfig.headerComponent ||
-                                entitiesTableConfig.useTimePageLink"></span>
+            <span fxFlex *ngIf="!entitiesTableConfig.headerComponent || entitiesTableConfig.useTimePageLink"></span>
             <div [fxShow]="addEnabled()">
-              <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+              <button mat-icon-button [disabled]="isLoading$ | async"
                       *ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions"
                       (click)="addEntity($event)"
                       matTooltip="{{ translations.add | translate }}"
@@ -52,7 +51,7 @@
                 <mat-icon>add</mat-icon>
               </button>
               <ng-template #addActions>
-                <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+                <button mat-icon-button [disabled]="isLoading$ | async"
                         *ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu"
                         [fxShow]="entitiesTableConfig.addActionDescriptors[0].isEnabled()"
                         (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
@@ -61,7 +60,7 @@
                   <mat-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</mat-icon>
                 </button>
                 <ng-template #addActionsMenu>
-                  <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+                  <button mat-icon-button [disabled]="isLoading$ | async"
                           matTooltip="{{ translations.add | translate }}"
                           matTooltipPosition="above"
                           [matMenuTriggerFor]="addActionsMenu">
@@ -79,20 +78,20 @@
                 </ng-template>
               </ng-template>
             </div>
-            <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+            <button mat-icon-button [disabled]="isLoading$ | async"
                     [fxShow]="actionDescriptor.isEnabled()" *ngFor="let actionDescriptor of headerActionDescriptors"
                     matTooltip="{{ actionDescriptor.name }}"
                     matTooltipPosition="above"
                     (click)="actionDescriptor.onAction($event)">
               <mat-icon>{{actionDescriptor.icon}}</mat-icon>
             </button>
-            <button mat-button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
+            <button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
                     matTooltip="{{ 'action.refresh' | translate }}"
                     matTooltipPosition="above">
               <mat-icon>refresh</mat-icon>
             </button>
             <button *ngIf="entitiesTableConfig.searchEnabled"
-                    mat-button mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
+                    mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
                     matTooltip="{{ translations.search | translate }}"
                     matTooltipPosition="above">
               <mat-icon>search</mat-icon>
@@ -101,7 +100,7 @@
         </mat-toolbar>
         <mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
-            <button mat-button mat-icon-button
+            <button mat-icon-button
                     matTooltip="{{ translations.search | translate }}"
                     matTooltipPosition="above">
               <mat-icon>search</mat-icon>
@@ -112,7 +111,7 @@
                      [(ngModel)]="pageLink.textSearch"
                      placeholder="{{ translations.search | translate }}"/>
             </mat-form-field>
-            <button mat-button mat-icon-button (click)="exitFilterMode()"
+            <button mat-icon-button (click)="exitFilterMode()"
                     matTooltip="{{ 'action.close' | translate }}"
                     matTooltipPosition="above">
               <mat-icon>close</mat-icon>
@@ -125,7 +124,7 @@
                       {{ translate.get(translations.selectedEntities, {count: dataSource.selection.selected.length}) | async }}
                     </span>
             <span fxFlex></span>
-            <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+            <button mat-icon-button [disabled]="isLoading$ | async"
                     [fxShow]="actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors"
                     matTooltip="{{ actionDescriptor.name }}"
                     matTooltipPosition="above"
@@ -167,7 +166,7 @@
               <mat-header-cell *matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
               <mat-cell *matCellDef="let entity; let row = index"
                         [ngStyle]="cellStyle(entity, column, row)">
-                <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+                <button mat-icon-button [disabled]="isLoading$ | async"
                         [fxShow]="column.actionDescriptor.isEnabled(entity)"
                         matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}"
                         matTooltipPosition="above"

@@ -14,12 +14,12 @@
 /// limitations under the License.
 ///
 
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
-import {EntitiesTableComponent} from '../../components/entity/entities-table.component';
-import {Authority} from '@shared/models/authority.enum';
-import {AssetsTableConfigResolver} from './assets-table-config.resolver';
+import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
+import { Authority } from '@shared/models/authority.enum';
+import { AssetsTableConfigResolver } from './assets-table-config.resolver';
 
 const routes: Routes = [
   {

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
@@ -40,7 +40,7 @@
           [fxShow]="!hideDelete() && !isEdit">
     {{'asset.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div fxLayout="row" fxLayout.xs="column">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onAssetIdCopied($event)"

@@ -14,16 +14,16 @@
 /// limitations under the License.
 ///
 
-import {Component} from '@angular/core';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {EntityComponent} from '../../components/entity/entity.component';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {EntityType} from '@shared/models/entity-type.models';
-import {NULL_UUID} from '@shared/models/id/has-uuid';
-import {ActionNotificationShow} from '@core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
-import {AssetInfo} from '@app/shared/models/asset.models';
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { EntityComponent } from '../../components/entity/entity.component';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { EntityType } from '@shared/models/entity-type.models';
+import { NULL_UUID } from '@shared/models/id/has-uuid';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
+import { TranslateService } from '@ngx-translate/core';
+import { AssetInfo } from '@app/shared/models/asset.models';
 
 @Component({
   selector: 'tb-asset',

@@ -14,14 +14,14 @@
 /// limitations under the License.
 ///
 
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {SharedModule} from '@shared/shared.module';
-import {HomeDialogsModule} from '../../dialogs/home-dialogs.module';
-import {AssetComponent} from './asset.component';
-import {AssetTableHeaderComponent} from './asset-table-header.component';
-import {AssetRoutingModule} from './asset-routing.module';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '@shared/shared.module';
+import { HomeDialogsModule } from '../../dialogs/home-dialogs.module';
+import { AssetComponent } from './asset.component';
+import { AssetTableHeaderComponent } from './asset-table-header.component';
+import { AssetRoutingModule } from './asset-routing.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { AssetTabsComponent } from '@home/pages/asset/asset-tabs.component';
 
 @NgModule({

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageUsers')"
@@ -46,7 +46,7 @@
           [fxShow]="!hideDelete() && !isEdit && !isPublic">
     {{'customer.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div fxLayout="row" fxLayout.xs="column">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onCustomerIdCopied($event)"

@@ -19,10 +19,9 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Customer } from '@shared/models/customer.model';
-import {Tenant} from '@app/shared/models/tenant.model';
-import {ActionNotificationShow} from '@app/core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
-import {ContactBasedComponent} from '../../components/entity/contact-based.component';
+import { ActionNotificationShow } from '@app/core/notification/notification.actions';
+import { TranslateService } from '@ngx-translate/core';
+import { ContactBasedComponent } from '../../components/entity/contact-based.component';
 
 @Component({
   selector: 'tb-customer',

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"

@@ -14,21 +14,20 @@
 /// limitations under the License.
 ///
 
-import {Component} from '@angular/core';
-import {Store} from '@ngrx/store';
-import {AppState} from '@core/core.state';
-import {EntityComponent} from '../../components/entity/entity.component';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {ActionNotificationShow} from '@core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { EntityComponent } from '../../components/entity/entity.component';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
+import { TranslateService } from '@ngx-translate/core';
 import {
   Dashboard,
-  isPublicDashboard,
   getDashboardAssignedCustomersText,
   isCurrentPublicDashboardCustomer,
-  DashboardInfo
+  isPublicDashboard
 } from '@shared/models/dashboard.models';
-import {DashboardService} from '@core/http/dashboard.service';
+import { DashboardService } from '@core/http/dashboard.service';
 
 @Component({
   selector: 'tb-dashboard-form',

@@ -18,7 +18,6 @@ import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { DeviceInfo } from '@shared/models/device.models';
-import { EntityType } from '@shared/models/entity-type.models';
 import { EntityTabsComponent } from '../../components/entity/entity-tabs.component';
 
 @Component({

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
@@ -40,13 +40,13 @@
           [fxShow]="!isEdit">
     {{ (deviceScope === 'customer_user' ? 'device.view-credentials' : 'device.manage-credentials') | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-raised-button color="primary" fxFlex.xs
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
           [fxShow]="!hideDelete() && !isEdit">
     {{'device.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div fxLayout="row" fxLayout.xs="column">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onDeviceIdCopied($event)"

@@ -14,22 +14,18 @@
 /// limitations under the License.
 ///
 
-import { Component, OnInit } from '@angular/core';
-import { select, Store } from '@ngrx/store';
+import { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { EntityComponent } from '../../components/entity/entity.component';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { User } from '@shared/models/user.model';
-import { selectAuth, selectUserDetails } from '@core/auth/auth.selectors';
-import { map } from 'rxjs/operators';
-import { Authority } from '@shared/models/authority.enum';
-import {DeviceInfo} from '@shared/models/device.models';
-import {EntityType} from '@shared/models/entity-type.models';
-import {NULL_UUID} from '@shared/models/id/has-uuid';
-import {ActionNotificationShow} from '@core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
-import {DeviceService} from '@core/http/device.service';
-import {ClipboardService} from 'ngx-clipboard';
+import { DeviceInfo } from '@shared/models/device.models';
+import { EntityType } from '@shared/models/entity-type.models';
+import { NULL_UUID } from '@shared/models/id/has-uuid';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
+import { TranslateService } from '@ngx-translate/core';
+import { DeviceService } from '@core/http/device.service';
+import { ClipboardService } from 'ngx-clipboard';
 
 @Component({
   selector: 'tb-device',

@@ -17,12 +17,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
-import {DeviceComponent} from '@modules/home/pages/device/device.component';
-import {DeviceRoutingModule} from './device-routing.module';
-import {DeviceTableHeaderComponent} from '@modules/home/pages/device/device-table-header.component';
-import {DeviceCredentialsDialogComponent} from '@modules/home/pages/device/device-credentials-dialog.component';
-import {HomeDialogsModule} from '../../dialogs/home-dialogs.module';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { DeviceComponent } from '@modules/home/pages/device/device.component';
+import { DeviceRoutingModule } from './device-routing.module';
+import { DeviceTableHeaderComponent } from '@modules/home/pages/device/device-table-header.component';
+import { DeviceCredentialsDialogComponent } from '@modules/home/pages/device/device-credentials-dialog.component';
+import { HomeDialogsModule } from '../../dialogs/home-dialogs.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { DeviceTabsComponent } from '@home/pages/device/device-tabs.component';
 
 @NgModule({

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
@@ -40,7 +40,7 @@
           [fxShow]="!hideDelete() && !isEdit">
     {{'entity-view.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div fxLayout="row" fxLayout.xs="column">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onEntityViewIdCopied($event)"

@@ -16,7 +16,7 @@
 
 -->
 <form style="min-width: 400px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
     <h2 translate>user.activation-link</h2>
     <span fxFlex></span>
     <button mat-button mat-icon-button
@@ -29,11 +29,11 @@
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content tb-toast toastTarget="activationLinkDialogContent">
-    <div class="mat-content mat-padding" fxLayout="column">
+    <div class="mat-content" fxLayout="column">
       <span [innerHTML]="'user.activation-link-text' | translate: {activationLink: activationLink}"></span>
       <div fxLayout="row" fxLayoutAlign="start center">
         <pre class="tb-highlight" fxFlex><code>{{ activationLink }}</code></pre>
-        <button mat-button mat-icon-button
+        <button mat-icon-button
                 color="primary"
                 ngxClipboard
                 cbContent="{{ activationLink }}"
@@ -45,10 +45,8 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row">
-    <span fxFlex></span>
+  <div mat-dialog-actions fxLayoutAlign="end center">
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             cdkFocusInitial
             [disabled]="(isLoading$ | async)"

@@ -16,7 +16,6 @@
 
 import { Component, Inject, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';

@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<form (ngSubmit)="add()" style="width: 600px;">
+<form (ngSubmit)="add()" style="min-width: 450px;">
   <mat-toolbar color="primary">
     <h2 translate>user.add</h2>
     <span fxFlex></span>
     <div [tb-help]="'user'"></div>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
             (click)="cancel()"
             type="button">
       <mat-icon class="material-icons">close</mat-icon>

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'disableAccount')"

@@ -14,13 +14,13 @@
 /// limitations under the License.
 ///
 
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { select, Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { EntityComponent } from '../../components/entity/entity.component';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { User } from '@shared/models/user.model';
-import { selectAuth, selectUserDetails } from '@core/auth/auth.selectors';
+import { selectAuth } from '@core/auth/auth.selectors';
 import { map } from 'rxjs/operators';
 import { Authority } from '@shared/models/authority.enum';
 import { isUndefined } from '@core/utils';

@@ -21,7 +21,7 @@ import { UserComponent } from '@modules/home/pages/user/user.component';
 import { UserRoutingModule } from '@modules/home/pages/user/user-routing.module';
 import { AddUserDialogComponent } from '@modules/home/pages/user/add-user-dialog.component';
 import { ActivationLinkDialogComponent } from '@modules/home/pages/user/activation-link-dialog.component';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { UserTabsComponent } from '@home/pages/user/user-tabs.component';
 
 @NgModule({

@@ -26,9 +26,9 @@ import { Observable } from 'rxjs';
 import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
 import { WidgetService } from '@core/http/widget.service';
 import { WidgetEditorComponent } from '@home/pages/widget/widget-editor.component';
-import { map, share } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 import { toWidgetInfo, WidgetInfo } from '@home/models/widget-component.models';
-import { Widget, widgetType, WidgetType } from '@app/shared/models/widget.models';
+import { widgetType, WidgetType } from '@app/shared/models/widget.models';
 import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
 import { WidgetsData } from '@home/models/dashboard-component.models';
 import { NULL_UUID } from '@shared/models/id/has-uuid';

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"

@@ -679,18 +679,18 @@ mat-label {
   }
 
   .mat-toolbar-tools {
-    font-size: 20px;
+    //font-size: 20px;
     letter-spacing: .005em;
-    box-sizing: border-box;
+    //box-sizing: border-box;
     font-weight: 400;
     display: flex;
     align-items: center;
     flex-direction: row;
     width: 100%;
-    height: 64px;
-    max-height: 64px;
+    //height: 64px;
+    //max-height: 64px;
     padding: 0 16px;
-    margin: 0;
+    //margin: 0;
   }
 
   .mat-icon {
@@ -782,6 +782,11 @@ mat-label {
 
   .mat-toolbar {
     line-height: normal;
+
+    h1, h2, h3, h4, h5, h6 {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   mat-toolbar *, mat-toolbar :after, mat-toolbar :before {
@@ -817,6 +822,9 @@ mat-label {
       .mat-dialog-actions {
         margin-bottom: 0;
         padding: 8px 8px 8px 16px;
+        button:last-of-type{
+          margin-right: 20px;
+        }
       }
     }
   }
@@ -843,7 +851,7 @@ mat-label {
   }
 
   .tb-fullscreen-dialog {
-    @media #{$mat-lt-md} {
+    @media #{$mat-lt-sm} {
       min-height: 100%;
       min-width: 100%;
       max-width: none !important;
@@ -904,6 +912,7 @@ mat-label {
     display: flex;
     height: calc(100% - 60px);
     text-transform: uppercase;
+    text-align: center;
   }