From d403644e5908220e540ae0d3f40232e1ddbe2ddb Mon Sep 17 00:00:00 2001
From: Elliot Winkler <elliot.winkler@gmail.com>
Date: Mon, 13 Sep 2021 10:05:53 -0600
Subject: [PATCH] Truncate long network names (#12058)

In some languages, network names are longer than the visible width of
the network dropdown. In these cases, the currently selected network will
overflow the bounds of the network dropdown container.

This commit addresses this issue so that the dropdown container will
grow and shrink appropriately, truncating the currently selected network
if needed.
---
 ui/components/app/app-header/index.scss      | 1 +
 ui/components/app/network-display/index.scss | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/ui/components/app/app-header/index.scss b/ui/components/app/app-header/index.scss
index 3d432caf8..9c4bff3b5 100644
--- a/ui/components/app/app-header/index.scss
+++ b/ui/components/app/app-header/index.scss
@@ -72,6 +72,7 @@
     flex-direction: row;
     align-items: center;
     flex: 0 0 auto;
+    margin-right: 1rem;
 
     &--clickable {
       cursor: pointer;
diff --git a/ui/components/app/network-display/index.scss b/ui/components/app/network-display/index.scss
index 78fe71f56..51ce5bcdc 100644
--- a/ui/components/app/network-display/index.scss
+++ b/ui/components/app/network-display/index.scss
@@ -35,6 +35,11 @@
     background-color: lighten($dodger-blue, 35%);
   }
 
+  &.chip {
+    margin: 0;
+    max-width: 100%;
+  }
+
   & .chip__label {
     overflow: hidden;
     text-overflow: ellipsis;