Adjust wallet permissions layout to preview WIF key trunction. (close #360) (#373)

app/assets/stylesheets/app.scss

@@ -101,3 +101,9 @@ label {
 .NotFound {
   width: 640px;
 }
+
+@media print {
+  .noPrint {
+    display:none;
+  }
+}

app/components/elements/Keys.jsx

@@ -60,10 +60,8 @@ class Keys extends Component {
         return (
             <span>
                 <div className="row">
-                    <div className="column small-2">
+                    <div className="column small-12">
                         <label>{authType}</label>
-                    </div>
-                    <div className="column small-10">
                         {auths}
                     </div>
                 </div>

app/components/elements/ShowKey.js

@@ -59,26 +59,27 @@ class ShowKey extends Component {
     render() {
         const {onShow, showLogin, props: {pubkey, cmpProps, children, authType}} = this
         const {show, wif} = this.state
-        const keyIcon = <span style={{fontSize: '100%'}}>Hide private key</span>
+        const keyIcon = <span>Hide private key</span>
         // Tooltip is trigggering a setState on unmounted component exception
-        const showTip = 'Show private key'//<Tooltip t="Show private key (WIF)">show</Tooltip>
+        const showTip = <span>Show private key</span> //<Tooltip t="Show private key (WIF)">show</Tooltip>
 
         const keyLink = wif ?
-            <div style={{marginBottom: 0}} className="hollow tiny button"><a onClick={onShow}>{show ? keyIcon : showTip}</a></div> :
+            <div style={{marginBottom: 0}} className="hollow tiny button slim"><a onClick={onShow}>{show ? keyIcon : showTip}</a></div> :
             authType === 'memo' ? null :
             authType === 'owner' ? null :
-            <div style={{marginBottom: 0}} className="hollow tiny button"><a onClick={showLogin}>Login to show</a></div>;
+            <div style={{marginBottom: 0}} className="hollow tiny button slim"><a onClick={showLogin}>Login to show</a></div>;
 
         return (<div className="row">
-            <div className="column small-9 overflow-ellipsis">
+            <div className="column small-10">
+                {/* Keep this as wide as possible, check print preview makes sure WIF it not cut off */}
                 <span {...cmpProps}>{show ? wif : pubkey}</span>
             </div>
-            <div className="column small-2">
+            <div className="column small-2 noPrint">
                 {keyLink}
             </div>
-            <div className="column small-1">
+            {/*<div className="column small-1">
                 {children}
-            </div>
+            </div>*/}
         </div>)
     }
 }

app/components/modules/Header.jsx

@@ -167,7 +167,7 @@ class Header extends React.Component {
             sort_order_extra_menu = <HorizontalMenu items={items} />
         }
         return (
-            <header className="Header">
+            <header className="Header noPrint">
                 <div className="Header__top header">
                     <div className="expanded row">
                         <div className="columns">
@@ -177,7 +177,7 @@ class Header extends React.Component {
                                         <Icon name="steem" size="2x" />
                                     </Link>
                                 </li>
-                                <li className="Header__top-steemit show-for-medium"><Link to={logo_link}>steemit<span className="beta">beta</span></Link></li>
+                                <li className="Header__top-steemit show-for-medium noPrint"><Link to={logo_link}>steemit<span className="beta">beta</span></Link></li>
                                 {(topic_link || user_name || page_name) && <li className="delim show-for-medium">|</li>}
                                 {topic_link && <li className="Header__top-topic">{topic_link}</li>}
                                 {user_name && <li><Link to={`/@${user_name}`}>{user_name}</Link></li>}

app/components/pages/UserProfile.jsx

@@ -217,9 +217,12 @@ export default class UserProfile extends React.Component {
         } else if( section === 'permissions' ) {
            section_title = account.name + "'s permissions"
            if(isMyAccount && wifShown) {
-               printLink = <a className="float-right" onClick={onPrint}>
-                   <Icon name="printer" />&nbsp;Print&nbsp;&nbsp;
-               </a>
+               printLink = <div>
+                   <a className="float-right noPrint" onClick={onPrint}>
+                       <Icon name="printer" />&nbsp;
+                       Print
+                   </a>
+               </div>
            }
         } else if( section === 'posts' ) {
            section_title = account.name + "'s posts";
@@ -290,12 +293,16 @@ export default class UserProfile extends React.Component {
                         </div>
                     </div>
                 </div>
-                <div className="UserProfile__top-nav row expanded">
+                <div className="UserProfile__top-nav row expanded noPrint">
                     {top_menu}
                 </div>
                 <div className="row">
                     <div className="column">
                         {printLink}
+                    </div>
+                </div>
+                <div className="row">
+                    <div className="column">
                         {/*section_title && <h2 className="UserProfile__section-title">{section_title}</h2>*/}
                         {tab_content}
                     </div>