Set max-width on network dropdown and ellipsis long network name (#6494)

MetaMask · Apr 25, 2019 · ec712d5 · ec712d5
1 parent 50fa063
commit ec712d5
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/ui/app/components/app/app-header/index.scss b/ui/app/components/app/app-header/index.scss
@@ -48,7 +48,6 @@
 
   &__contents {
     display: flex;
-    justify-content: space-between;
     flex-flow: row nowrap;
     width: 100%;
 
@@ -74,17 +73,33 @@
     flex-direction: row;
     align-items: center;
     cursor: pointer;
+    flex: 0 0 auto;
   }
 
   &__account-menu-container {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
+    flex: 1 1 auto;
+    width: 0;
+    flex-flow: row nowrap;
+    justify-content: flex-end;
   }
 
   &__network-component-wrapper {
     display: flex;
     flex-direction: row;
     align-items: center;
+    flex: 1 0 auto;
+    width: 0;
+    justify-content: flex-end;
+
+    .network-component.pointer {
+      max-width: 200px;
+    }
+
+    .network-indicator {
+      width: 100%;
+    }
   }
 }
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
@@ -51,21 +51,26 @@
     line-height: 15px;
     font-size: 12px;
     padding: 0 4px;
+    flex: 0 0 auto;
   }
 
   .fa-question-circle {
     margin: 0 4px 0 6px;
     font-size: 1rem;
+    flex: 0 0 auto;
   }
 }
 
 .network-name {
   padding: 0 4px;
   font-family: Roboto;
   font-size: 12px;
-  flex: 1 0 auto;
+  flex: 1 1 auto;
   color: $tundora;
   font-weight: 500;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .dropdown-menu-item .fa.delete {