This is a fix of several problems I had when using the vanilla Material-ui Dialog like using javascript for height, lack of full screen for mobile, having to choose the body scroll visibility regardless of screen/content size and the body scroll position in some browsers. Tested on latest chrome and safari only. Please let me know if you think i…

dialog.css

.dialog-root {
  padding: 0 !important;
}

.dialog-root > div:first-child {
  height: 100%;
}

/* Used as wrapper */
.dialog-root > div:first-child > .dialog-content {
  transform: none !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* Actual content */
.dialog-root > div:first-child > .dialog-content > div {
  width: 100%;
  max-width: 800px;
  max-height: 100%;

  display: flex;
  flex-direction: column;
}

.dialog-root > div:first-child > .dialog-content > div > .dialog-body {
  padding: 0 !important;
  border-top: solid #e0e0e0 1px;
  border-bottom: solid #e0e0e0 1px;
  display: flex;
}

.dialog-root > div:first-child > .dialog-content > div > .dialog-body > .dialog-scroll {
  padding: 0 16px 16px 16px;
  width: 100%;
  overflow: auto;
}

Dialog.jsx

import React, { PropTypes } from 'react';
import MDialog from 'material-ui/Dialog';
import './dialog.css';

const Dialog = props => (
  <MDialog
    {...props}

    repositionOnUpdate={false}
    autoDetectWindowHeight={false}
    autoScrollBodyContent={false}
    className="dialog-root"
    contentClassName="dialog-content"
    bodyClassName="dialog-body"
  >
    <div className="dialog-scroll" >
      {props.children}
    </div>
  </MDialog>
);

Dialog.propTypes = {
  children: PropTypes.node,
};

export default Dialog;