Improve personal_sign style

textarea was not resizing the way I'd expected, so made it permanently larger, to accomodate larger messages.

2 files changed, 23 insertions, 11 deletions

diff --git a/ui/app/components/binary-renderer.js b/ui/app/components/binary-renderer.js
index a9d49b128..0b6a1f5c2 100644
--- a/ui/app/components/binary-renderer.js
+++ b/ui/app/components/binary-renderer.js
@@ -2,6 +2,7 @@ const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const ethUtil = require('ethereumjs-util')
+const extend = require('xtend')
 
 module.exports = BinaryRenderer
 
@@ -12,20 +13,22 @@ function BinaryRenderer () {
 
 BinaryRenderer.prototype.render = function () {
   const props = this.props
-  const { value } = props
+  const { value, style } = props
   const text = this.hexToText(value)
 
+  const defaultStyle = extend({
+    width: '315px',
+    maxHeight: '210px',
+    resize: 'none',
+    border: 'none',
+    background: 'white',
+    padding: '3px',
+  }, style)
+
   return (
     h('textarea.font-small', {
       readOnly: true,
-      style: {
-        width: '315px',
-        maxHeight: '210px',
-        resize: 'none',
-        border: 'none',
-        background: 'white',
-        padding: '3px',
-      },
+      style: defaultStyle,
       defaultValue: text,
     })
   )
diff --git a/ui/app/components/pending-personal-msg-details.js b/ui/app/components/pending-personal-msg-details.js
index fa2c6416c..1050513f2 100644
--- a/ui/app/components/pending-personal-msg-details.js
+++ b/ui/app/components/pending-personal-msg-details.js
@@ -40,9 +40,18 @@ PendingMsgDetails.prototype.render = function () {
       }),
 
       // message data
-      h('div', [
+      h('div', {
+        style: {
+          height: '260px',
+        },
+      }, [
         h('label.font-small', { style: { display: 'block' } }, 'MESSAGE'),
-        h(BinaryRenderer, { value: data }),
+        h(BinaryRenderer, {
+          value: data,
+          style: {
+            height: '215px',
+          },
+        }),
       ]),
 
     ])