Only make dialog fullscreen when the window width and height are both small

newIDE/app/src/EventsSheet/InstructionEditor/NewInstructionEditorDialog.js

@@ -35,7 +35,7 @@ import { SelectColumns } from '../../UI/Reponsive/SelectColumns';
 import {
   ResponsiveWidthMeasurer,
   type WidthType,
-} from '../../UI/Reponsive/ReponsiveWidthMeasurer';
+} from '../../UI/Reponsive/ResponsiveWidthMeasurer';
 const gd = global.gd;
 
 const styles = {

newIDE/app/src/UI/Dialog/index.js

@@ -4,7 +4,7 @@ import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
-import { ResponsiveWidthMeasurer } from '../Reponsive/ReponsiveWidthMeasurer';
+import { ResponsiveWindowMeasurer } from '../Reponsive/ResponsiveWindowMeasurer';
 
 const styles = {
   defaultBody: {
@@ -82,9 +82,8 @@ export default (props: Props) => {
     actions
   );
 
-  // TODO: On very small screens, make the dialogs always fullscreen
   return (
-    <ResponsiveWidthMeasurer>
+    <ResponsiveWindowMeasurer>
       {size => (
         <Dialog
           open={open}
@@ -120,6 +119,6 @@ export default (props: Props) => {
           </DialogActions>
         </Dialog>
       )}
-    </ResponsiveWidthMeasurer>
+    </ResponsiveWindowMeasurer>
   );
 };

newIDE/app/src/UI/Reponsive/ResponsiveWidthMeasurer.js

@@ -8,10 +8,8 @@ type Props = {|
 |};
 
 /**
- * Pass the proper width to the children according to the window width.
- * Could be improved with react-measure to only compute the available width
- * for the component, but at least this implementation is very simple and not
- * involving obscure and fragile DOM measurements.
+ * Pass the proper size to the children according to the window size.
+ * This is only considering the window width.
  */
 export const ResponsiveWidthMeasurer = ({ children }: Props) => {
   if (typeof window === 'undefined') {

newIDE/app/src/UI/Reponsive/ResponsiveWindowMeasurer.js

@@ -0,0 +1,27 @@
+// @flow
+import * as React from 'react';
+
+export type WidthType = 'small' | 'medium' | 'large';
+
+type Props = {|
+  children: (width: WidthType) => React.Node,
+|};
+
+/**
+ * Pass the proper size to the children according to the window size.
+ * This consider a window to be "small" if *both* the width and height
+ * are small.
+ */
+export const ResponsiveWindowMeasurer = ({ children }: Props) => {
+  if (typeof window === 'undefined') {
+    return children('medium');
+  }
+
+  return children(
+    window.innerWidth < 750 || window.innerHeight < 750
+      ? 'small'
+      : window.innerWidth < 1150
+      ? 'medium'
+      : 'large'
+  );
+};