[Improvement] Improve comment list & edi profile dialog frame size

src/components/commentList/CommentListComponent.tsx

@@ -2,6 +2,9 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
+
+// - Material UI
+import { withStyles } from 'material-ui/styles'
 import List, { ListItem, ListItemText } from 'material-ui/List'
 
 // - Import app components
@@ -15,6 +18,14 @@ import { Comment } from 'core/domain/comments'
 
 // - Import actions
 
+const styles = (theme: any) => ({
+  list: {
+    width: '100%',
+    maxHeight: 290,
+    overflowY: 'auto'
+  }
+})
+
 /**
  * Create component class
  */
@@ -88,17 +99,11 @@ export class CommentListComponent extends Component<ICommentListComponentProps,
    * @return {react element} return the DOM which rendered by component
    */
   render () {
-
-    const styles: any = {
-      list: {
-        width: '100%',
-        maxHeight: 450
-      }
-    }
+    const {classes} = this.props
 
     return (
 
-      <List style={styles.list}>
+      <List className={classes.list}>
 
         {this.commentList()}
       </List>
@@ -133,4 +138,4 @@ const mapStateToProps = (state: any, ownProps: ICommentListComponentProps) => {
 }
 
 // - Connect component to redux store
-export default connect(mapStateToProps, mapDispatchToProps)(CommentListComponent as any)
+export default connect(mapStateToProps, mapDispatchToProps)((withStyles(styles as any)(CommentListComponent as any))as any)

src/components/commentList/ICommentListComponentProps.ts

@@ -35,4 +35,9 @@ export interface ICommentListComponentProps {
    * @memberof ICommentListComponentProps
    */
   disableComments: boolean
+
+  /**
+   * Styles
+   */
+  classes?: any
 }

src/components/editProfile/EditProfileComponent.tsx

@@ -48,6 +48,10 @@ const styles = (theme: any) => ({
   dialogTitle: {
     padding: 0
   },
+  dialogContentRoot: {
+    maxHeight: 520,
+    minWidth: 330
+  },
   fullPageXs: {
     [theme.breakpoints.down('xs')]: {
       width: '100%',
@@ -328,7 +332,7 @@ export class EditProfileComponent extends Component<IEditProfileComponentProps,
           onClose={this.props.onRequestClose}
           maxWidth='sm'
         >
-          <DialogContent>
+          <DialogContent className={classes.dialogContentRoot}>
             {/* Banner */}
             <div style={{ position: 'relative' }}>
               <ImgCover width='100%' height='250px' borderRadius='2px' fileName={this.state.banner} />