prevent Dialog from being uncloseable with long text

- Fix #7930
- Auditors: @luixxiul

app/renderer/components/common/messageBox.js

@@ -16,6 +16,8 @@ const {StyleSheet, css} = require('aphrodite')
 const commonStyles = require('../styles/commonStyles')
 const globalStyles = require('../styles/global')
 
+const ScrollableContent = require('./scrollableContent')
+
 class MessageBox extends ImmutableComponent {
   constructor () {
     super()
@@ -116,7 +118,9 @@ class MessageBox extends ImmutableComponent {
           {this.title}
         </div>
         <div className={css(styles.body)} data-test-id='msgBoxMessage'>
-          {this.message}
+          <ScrollableContent>
+            {this.message}
+          </ScrollableContent>
         </div>
         {
           this.showSuppress
@@ -154,7 +158,10 @@ const styles = StyleSheet.create({
     marginTop: globalStyles.spacing.dialogInsideMargin,
     minWidth: '425px',
     marginBottom: globalStyles.spacing.dialogInsideMargin,
-    userSelect: 'text'
+    userSelect: 'text',
+    maxHeight: '300px',
+    overflowY: 'auto',
+    overflowX: 'hidden'
   },
   buttons: {
     display: 'flex',

app/renderer/components/styles/commonStyles.js

@@ -45,7 +45,11 @@ const styles = StyleSheet.create({
     // Issue #7949
     padding: `${globalStyles.spacing.dialogInsideMargin} 30px`,
     position: 'absolute',
-    top: globalStyles.spacing.dialogTopOffset
+    top: globalStyles.spacing.dialogTopOffset,
+    // Issue #7930
+    boxSizing: 'border-box',
+    maxWidth: '600px',
+    maxHeight: '500px'
   },
 
   // itemList.less

app/renderer/components/styles/global.js

@@ -142,7 +142,8 @@ const globalStyles = {
     paymentsMargin: '20px',
     modalPanelHeaderMarginBottom: '.5em',
     paddingHorizontal: '30px',
-    privateTabPadding: '40px'
+    privateTabPadding: '40px',
+    scrollBarSize: '10px'
   },
   shadow: {
     switchShadow: 'inset 0 1px 4px rgba(0, 0, 0, 0.35)',
@@ -154,7 +155,8 @@ const globalStyles = {
     lightBoxShadow: '0 2px 2px lightGray',
     insetShadow: 'inset -5px 0 15px rgba(0, 0, 0, 0.25)',
     orangeButtonShadow: '0 2px 0 braveDarkOrange',
-    bookmarkHangerArrowUpShadow: '-2px 2px 3px 0px rgba(0, 0, 0, 0.1)'
+    bookmarkHangerArrowUpShadow: '-2px 2px 3px 0px rgba(0, 0, 0, 0.1)',
+    braveComponentsShadow: '0px 1px 5px -1px rgba(0, 0, 0, 0.5)'
   },
   transition: {
     transitionDuration: '100ms',