prevent Dialog from being uncloseable with long text

- Fix #7930 - Auditors: @luixxiul
brave · Apr 28, 2017 · c4b43cf · c4b43cf
1 parent 8da5411
commit c4b43cf
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 19 deletions.
diff --git a/app/renderer/components/common/messageBox.js b/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'
   }
 })
 

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

diff --git a/app/renderer/components/styles/global.js b/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',