[Mobile] Improve bottom buttons position of edit profile dialog

src/components/editProfile/EditProfileComponent.tsx

@@ -50,7 +50,11 @@ const styles = (theme: any) => ({
   },
   dialogContentRoot: {
     maxHeight: 400,
-    minWidth: 330
+    minWidth: 330,
+    [theme.breakpoints.down('xs')]: {
+      maxHeight: '100%',
+    }
+
   },
   fullPageXs: {
     [theme.breakpoints.down('xs')]: {
@@ -59,6 +63,21 @@ const styles = (theme: any) => ({
       margin: 0,
       overflowY: 'auto'
     }
+  },
+  fixedDownStickyXS: {
+    [theme.breakpoints.down('xs')]: {
+      position: 'fixed',
+      bottom: 0,
+      right: 0,
+      background: 'white',
+      width: '100%'
+    }
+  },
+  bottomSpace: {
+    height: 16,
+    [theme.breakpoints.down('xs')]: {
+      height: 36
+    }
   }
 })
 
@@ -391,9 +410,9 @@ export class EditProfileComponent extends Component<IEditProfileComponentProps,
               <br />
 
             </Paper>
-            <div style={{ height: '16px' }}></div>
+            <div className={classes.bottomSpace}></div>
           </DialogContent>
-            <DialogActions>
+          <DialogActions className={classes.fixedDownStickyXS}>
             <Button onClick={this.props.onRequestClose} > {translate!('profile.cancelButton')} </Button>
             <Button variant='raised' color='primary' onClick={this.handleUpdate} style={this.styles.updateButton}> {translate!('profile.updateButton')} </Button>
           </DialogActions>