Fixes header on lower resolutions

CHANGELOG.md

@@ -7,6 +7,7 @@
 - [#218] Fixes the sorting on the tokens and channels pages to not get reset when polling.
 - [#141] Only shows the connected tokens in the payment dialog token field.
 - [#203] Clears token amount input field on focus.
+- [#207] Fixes header content to fit on lower resolutions.
 
 ### Added
 - [#16] Adds a confirmation dialog for payments which are retried by the user.
@@ -132,6 +133,7 @@ token network.
 [#218]: https://github.com/raiden-network/webui/issues/218
 [#212]: https://github.com/raiden-network/webui/issues/212
 [#208]: https://github.com/raiden-network/webui/issues/208
+[#207]: https://github.com/raiden-network/webui/issues/207
 [#205]: https://github.com/raiden-network/webui/issues/205
 [#203]: https://github.com/raiden-network/webui/issues/203
 [#196]: https://github.com/raiden-network/webui/issues/196

src/app/app.component.html

@@ -29,10 +29,12 @@
         </span>
     </span>
     <span class="toolbar-spacer"></span>
-    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <span *ngIf="!isMobile()" class="account" fxFlexAlign="start">
-            Your account:
-        </span>
+    <div
+        fxLayout="row"
+        fxLayoutAlign="start center"
+        fxLayoutGap.gt-xs="8px"
+        class="header-content"
+    >
         <div class="account-info" fxLayout="column" fxLayoutAlign="center end">
             <span
                 class="truncate account"
@@ -41,7 +43,14 @@
                 matTooltipShowDelay="600"
                 matTooltipPosition="before"
             >
-                {{ raidenAddress | shortenAddress }}
+                <span
+                    *ngIf="!isSmallScreen()"
+                    class="account-label"
+                    fxFlexAlign="start"
+                >
+                    Your account:
+                </span>
+                <span>{{ raidenAddress | shortenAddress }}</span>
             </span>
             <span class="balance-info" *ngIf="(balance$ | async) as balance">
                 <span
@@ -89,28 +98,28 @@
                 content_copy
             </mat-icon>
         </button>
-    </div>
-    <button
-        mat-button
-        (click)="notification_sidenav.toggle()"
-        class="notification-button"
-        matTooltip="Open notification panel"
-        [style.background-color]="notificationBlink"
-    >
-        <span
-            [matBadge]="pendingRequests"
-            matBadgeOverlap="true"
-            matBadgeColor="primary"
-            matBadgePosition="after"
-            class="notification-button-container"
+        <button
+            mat-button
+            (click)="notification_sidenav.toggle()"
+            class="notification-button"
+            matTooltip="Open notification panel"
+            [style.background-color]="notificationBlink"
         >
-            <img
-                alt="User address identicon"
-                class="round identicon"
-                [src]="identicon(raidenAddress)"
-            />
-        </span>
-    </button>
+            <span
+                [matBadge]="pendingRequests"
+                matBadgeOverlap="true"
+                matBadgeColor="primary"
+                matBadgePosition="after"
+                class="notification-button-container"
+            >
+                <img
+                    alt="User address identicon"
+                    class="round identicon"
+                    [src]="identicon(raidenAddress)"
+                />
+            </span>
+        </button>
+    </div>
 </mat-toolbar>
 
 <mat-sidenav-container class="sidenav-container">

src/app/app.component.scss

@@ -64,6 +64,10 @@ mat-sidenav-content {
     line-height: 22px;
 }
 
+.account-label {
+    padding-right: 64px;
+}
+
 .info-container {
     @include respond-to('medium-screens') {
         margin-left: 25px;
@@ -85,14 +89,17 @@ mat-sidenav-content {
     }
 }
 
+.header-content {
+    height: 100%;
+}
+
 .faucet-button {
     padding: 0;
     line-height: 100%;
     height: 100%;
 }
 
 .notification-button {
-    margin-left: 8px;
     padding: 0;
     border-radius: 0;
     height: 100%;

src/app/app.component.ts

@@ -65,6 +65,10 @@ export class AppComponent implements OnInit, OnDestroy {
         return this.mediaObserver.isActive('xs');
     }
 
+    isSmallScreen(): boolean {
+        return this.mediaObserver.isActive('lt-md');
+    }
+
     ngOnInit() {
         this.subscription = this.raidenService.raidenAddress$.subscribe(
             address => (this.raidenAddress = address)