Limit balance displays in width

This is necessary to not break the layout for big balances
raiden-network · Apr 22, 2021 · 23f8a37 · 23f8a37
1 parent 0b86cdd
commit 23f8a37
Show file tree

Hide file tree

Showing 11 changed files with 35 additions and 8 deletions.
diff --git a/src/app/components/balance-with-symbol/balance-with-symbol.component.css b/src/app/components/balance-with-symbol/balance-with-symbol.component.css
@@ -0,0 +1,11 @@
+:host {
+    white-space: nowrap;
+}
+
+.balance {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    vertical-align: text-bottom;
+}
diff --git a/src/app/components/balance-with-symbol/balance-with-symbol.component.html b/src/app/components/balance-with-symbol/balance-with-symbol.component.html
@@ -2,6 +2,8 @@
     *ngIf="balance | decimal: token.decimals as decimalBalance"
     [matTooltip]="decimalBalance"
     [matTooltipDisabled]="!showTooltip"
+    class="balance"
+    [style.max-width.px]="maxBalanceWidth"
 >
     {{ decimalBalance | displayDecimals: 3 }}
 </span>

diff --git a/src/app/components/balance-with-symbol/balance-with-symbol.component.ts b/src/app/components/balance-with-symbol/balance-with-symbol.component.ts
@@ -11,6 +11,7 @@ export class BalanceWithSymbolComponent implements OnInit {
     @Input() balance: BigNumber;
     @Input() token: UserToken;
     @Input() showTooltip = true;
+    @Input() maxBalanceWidth = 50;
 
     constructor() {}
 

diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
@@ -37,7 +37,7 @@
                 <span fxLayout="row">
                     <span
                         [matTooltip]="balance"
-                        class="header__balance header__balance--uppercase"
+                        class="header__balance header__balance--limited"
                     >
                         {{ balance | displayDecimals: 3 }}&nbsp;
                     </span>

diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
@@ -15,6 +15,13 @@
         &--uppercase {
             text-transform: uppercase;
         }
+
+        &--limited {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 50px;
+        }
     }
 
     &__label {
@@ -119,15 +126,16 @@
     background-color: $black;
     border-radius: 8px;
     font-size: 12px;
-    line-height: 30px;
+    line-height: 15px;
     color: $white;
     width: 125px;
     max-height: 171px;
     overflow-y: scroll;
 
     &__label {
         width: 100%;
-        padding-top: 6px;
+        padding-top: 13.5px;
+        padding-bottom: 7.5px;
         background-color: $black;
         position: sticky;
         position: -webkit-sticky;
@@ -140,6 +148,7 @@
     }
 
     &__item {
+        padding: 7.5px 0;
         margin: 0 16px;
         white-space: nowrap;
         overflow: hidden;

diff --git a/src/app/components/header/header.component.spec.ts b/src/app/components/header/header.component.spec.ts
@@ -163,7 +163,7 @@ describe('HeaderComponent', () => {
         expect(dialogSpy).toHaveBeenCalledTimes(1);
         expect(dialogSpy).toHaveBeenCalledWith(QrCodeComponent, {
             data: payload,
-            width: '536px',
+            width: '550px',
         });
     });
 

diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
@@ -141,7 +141,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
         };
         this.dialog.open(QrCodeComponent, {
             data: payload,
-            width: '536px',
+            width: '550px',
         });
     }
 

diff --git a/src/app/components/token/token.component.html b/src/app/components/token/token.component.html
@@ -125,6 +125,7 @@
             <app-balance-with-symbol
                 [balance]="selectedToken.sumChannelBalances"
                 [token]="selectedToken"
+                [maxBalanceWidth]="250"
             ></app-balance-with-symbol>
         </div>
         <ng-template #all_networks>All Networks</ng-template>

diff --git a/src/app/components/token/token.component.scss b/src/app/components/token/token.component.scss
@@ -47,7 +47,7 @@
     &__item {
         text-align: center;
         font-size: 12px;
-        line-height: 22px;
+        line-height: 15px;
         border-right: 1px solid $bg-grey;
 
         &:last-child {

diff --git a/src/app/components/user-deposit-dialog/user-deposit-dialog.component.html b/src/app/components/user-deposit-dialog/user-deposit-dialog.component.html
@@ -13,6 +13,7 @@
                 class="info__balance"
                 [balance]="balance$ | async"
                 [token]="servicesToken"
+                [maxBalanceWidth]="200"
             ></app-balance-with-symbol>
             <span
                 *ngIf="zeroBalance$ | async"
@@ -211,6 +212,7 @@
                         [balance]="withdrawPlan?.amount"
                         [token]="servicesToken"
                         [showTooltip]="false"
+                        [maxBalanceWidth]="100"
                     ></app-balance-with-symbol>
                     <mat-icon
                         *ngIf="!withdrawPending; else withdraw_pending"

diff --git a/src/app/components/user-deposit-dialog/user-deposit-dialog.component.scss b/src/app/components/user-deposit-dialog/user-deposit-dialog.component.scss
@@ -4,7 +4,8 @@
     &__balance {
         font-weight: 500;
         font-size: 26px;
-        line-height: 39px;
+        line-height: 32px;
+        padding: 3.5px 0;
         color: $white;
     }
 
@@ -168,7 +169,7 @@
 }
 
 .form {
-    z-index: 3000;
+    z-index: 2500;
     background-color: $black;
     position: absolute;
     margin: 0 !important;