diff --git a/app/renderer/components/common/messageBox.js b/app/renderer/components/common/messageBox.js index 30389810077..e01f427c658 100644 --- a/app/renderer/components/common/messageBox.js +++ b/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', diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js index 68e945c127f..a16d1fbb79b 100644 --- a/app/renderer/components/styles/commonStyles.js +++ b/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 diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js index 60ff144b3e3..4167453f8da 100644 --- a/app/renderer/components/styles/global.js +++ b/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',