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

2 files changed, 22 insertions, 2 deletions

diff --git a/ui/app/components/app/app-header/index.scss b/ui/app/components/app/app-header/index.scss
index 325844af5..d46b16f25 100644
--- 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
index 2c6ca2522..da90b7910 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -51,11 +51,13 @@
     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;
   }
 }
 
@@ -63,9 +65,12 @@
   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 {