prevent Dialog from being uncloseable with long text

- Fix #7930
- Auditors: @luixxiul

app/renderer/components/common/messageBox.js

@@ -118,18 +118,20 @@ class MessageBox extends ImmutableComponent {
  <div className={css(styles.body)} data-test-id='msgBoxMessage'>
  {this.message}
  </div>
- {
- this.showSuppress
- ? <SwitchControl
- // TODO: refactor SwitchControl
- className={css(commonStyles.noPaddingLeft)}
- rightl10nId='preventMoreAlerts'
- checkedOn={this.suppress}
- onClick={this.onSuppressChanged} />
- : null
- }
- <div className={css(styles.buttons)} data-test-id='msgBoxButtons'>
- {this.messageBoxButtons}
+ <div className={css(this.showSuppress && styles.actions)}>
+ {
+ this.showSuppress
+ ? <SwitchControl
+ // TODO: refactor SwitchControl
+ className={css(commonStyles.noPaddingLeft)}
+ rightl10nId='preventMoreAlerts'
+ checkedOn={this.suppress}
+ onClick={this.onSuppressChanged} />
+ : null
+ }
+ <div className={css(styles.buttons)} data-test-id='msgBoxButtons'>
+ {this.messageBoxButtons}
+ </div>
  </div>
  </div>
  </Dialog>
@@ -142,24 +144,31 @@ const styles = StyleSheet.create({
  },
  container: {
  outline: 'none',
- display: 'block'
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between'
  },
  title: {
  fontWeight: 'bold',
  fontSize: '12pt',
- marginBottom: globalStyles.spacing.dialogInsideMargin,
  userSelect: 'text'
  },
  body: {
  marginTop: globalStyles.spacing.dialogInsideMargin,
  minWidth: '425px',
  marginBottom: globalStyles.spacing.dialogInsideMargin,
- userSelect: 'text'
+ userSelect: 'text',
+ maxHeight: 'calc(80vh - 220px)',
+ overflowY: 'auto',
+ overflowX: 'hidden'
+ },
+ actions: {
+ display: 'flex',
+ justifyContent: 'space-between'
  },
  buttons: {
  display: 'flex',
- justifyContent: 'flex-end',
- marginTop: globalStyles.spacing.dialogInsideMargin
+ justifyContent: 'flex-end'
  }
 })
 

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: `calc(80vh - ${globalStyles.spacing.downloadsBarHeight})`
  },
 
  // itemList.less

app/renderer/components/styles/global.js

@@ -110,7 +110,7 @@ const globalStyles = {
  buttonHeight: '25px',
  buttonWidth: '25px',
  navbarHeight: '36px',
- downloadsBarHeight: '50px',
+ downloadsBarHeight: '60px',
  tabsToolbarHeight: '26px',
  tabPagesHeight: '7px',
  bookmarkHangerMaxWidth: '350px',