Header - Fix text overflowing account menu on very large usernames

- Fixes bitshares#1177
bangzi1001 · Feb 28, 2018 · 6e98cb5 · 6e98cb5
1 parent 9d819eb
commit 6e98cb5
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/app/assets/stylesheets/themes/_theme-template.scss b/app/assets/stylesheets/themes/_theme-template.scss
@@ -2052,7 +2052,12 @@ $mobile-input-bg
     // top: 50px!important;
     .table-cell {
         display: inline-block;
-        @extend .truncated;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        &:nth-of-type(2) {
+            max-width: 17em;
+        }
     }
 }
 

diff --git a/app/components/Layout/Header.jsx b/app/components/Layout/Header.jsx
@@ -567,7 +567,7 @@ class Header extends React.Component {
                     {walletBalance}
 
                     {hasLocalWallet && (
-                        <ul className="dropdown header-menu local-wallet-menu" style={{right: 0, maxHeight: !this.state.accountsListDropdownActive ? 0 : maxHeight, overflowY: "auto", position:"absolute",width:"250px"}}>
+                        <ul className="dropdown header-menu local-wallet-menu" style={{right: 0, maxHeight: !this.state.accountsListDropdownActive ? 0 : maxHeight, overflowY: "auto", position:"absolute",width:"20em"}}>
                             <li className={cnames({active: active.indexOf("/accounts") !== -1}, "divider")} onClick={this._onNavigate.bind(this, "/accounts")}>
                                 <div className="table-cell"><Icon size="2x" name="folder" /></div>
                                 <div className="table-cell"><Translate content="explorer.accounts.title" /></div>