Make the banner responsive - allow text to wrap around on smaller screens

Author: omkar-ethz

src/app/shared/modules/status-message/status-banner/status-banner.component.html

@@ -1,5 +1,5 @@
-<mat-toolbar [color]="bannerColor" style="height: 32px">
-  <span [innerHTML]="appConfig.statusMessage"></span>
+<mat-toolbar [color]="bannerColor" class="toolbar">
+  <span [innerHTML]="appConfig.statusMessage" class="status-message"></span>
   <span class="spacer"></span>
   <button mat-icon-button aria-label="Dismiss" (click)="onDismiss()">
     <mat-icon>close</mat-icon>

src/app/shared/modules/status-message/status-banner/status-banner.component.scss

@@ -1,3 +1,17 @@
 .spacer {
   flex: 1 1 auto;
 }
+
+.toolbar {
+  height: 32px;
+}
+
+@media (max-width: 800px) {
+  .toolbar {
+    height: 64px;
+  }
+  .status-message {
+    text-wrap: wrap;
+    font-size: 16px;
+  }
+}