Wrap smaller custom block explorer url text (#6714)

4 files changed, 16 insertions, 3 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 41ba7ef7a..a0b084eb2 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -1742,6 +1742,9 @@
   "viewAccount": {
     "message": "View Account"
   },
+  "viewinExplorer": {
+    "message": "View in Explorer"
+  },
   "viewOnCustomBlockExplorer": {
     "message": "View at $1"
   },
diff --git a/ui/app/components/app/dropdowns/account-details-dropdown.js b/ui/app/components/app/dropdowns/account-details-dropdown.js
index cbeccdd81..a4c33620a 100644
--- a/ui/app/components/app/dropdowns/account-details-dropdown.js
+++ b/ui/app/components/app/dropdowns/account-details-dropdown.js
@@ -119,8 +119,11 @@ AccountDetailsDropdown.prototype.render = function () {
         this.props.onClose()
       },
       text: (rpcPrefs.blockExplorerUrl
-        ? this.context.t('blockExplorerView', [rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1]])
+        ? this.context.t('viewinExplorer')
         : this.context.t('viewOnEtherscan')),
+      subText: (rpcPrefs.blockExplorerUrl
+        ? rpcPrefs.blockExplorerUrl.match(/^https?:\/\/(.+)/)[1]
+        : null),
       icon: h(`img`, { src: 'images/open-etherscan.svg', style: { height: '15px' } }),
     }),
     isRemovable ? h(Item, {
diff --git a/ui/app/components/app/dropdowns/components/menu.js b/ui/app/components/app/dropdowns/components/menu.js
index f6d8a139e..63501eaa9 100644
--- a/ui/app/components/app/dropdowns/components/menu.js
+++ b/ui/app/components/app/dropdowns/components/menu.js
@@ -20,16 +20,18 @@ Item.prototype.render = function () {
     icon,
     children,
     text,
+    subText,
     className = '',
     onClick,
   } = this.props
   const itemClassName = `menu__item ${className} ${onClick ? 'menu__item--clickable' : ''}`
   const iconComponent = icon ? h('div.menu__item__icon', [icon]) : null
   const textComponent = text ? h('div.menu__item__text', text) : null
+  const subTextComponent = subText ? h('div.menu__item__subtext', subText) : null
 
   return children
     ? h('div', { className: itemClassName, onClick }, children)
-    : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent ]
+    : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent, subTextComponent ]
       .filter(d => Boolean(d))
     )
 }
diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss
index 6409ad545..7d71ea799 100644
--- a/ui/app/css/itcss/components/menu.scss
+++ b/ui/app/css/itcss/components/menu.scss
@@ -8,7 +8,7 @@
   &__item {
     padding: 18px;
     display: flex;
-    flex-flow: row nowrap;
+    flex-flow: row wrap;
     align-items: center;
     position: relative;
     z-index: 201;
@@ -39,6 +39,11 @@
       font-size: 16px;
       line-height: 21px;
     }
+
+    &__subtext {
+      font-size: 12px;
+      padding: 5px 0px 0px 30px;
+    }
   }
 
   &__divider {