From 903476bdadcbfe12b35b7d723c2cbe8d376455f4 Mon Sep 17 00:00:00 2001
From: Simek <gosimek@gmail.com>
Date: Wed, 26 Jan 2022 04:10:22 -0800
Subject: [PATCH] use `centered` prop for variable height modals (#3334)

Summary:
Currently all of the modals are displayed using default positioning, which works fine for small modals and large app windows, but it cause small UI/UX issues (double scroll bars) when app window is quite small.

Adding [`centered` prop](https://ant.design/components/modal/#API) for variable height modals improves this situation a bit, but it also changes a bit the modal position when using maximised window, but I think this is bearable looking at improvements gained when window size is reduced.

## Changelog

* use `centered` prop for variable height modals to improve UI in small app window

Pull Request resolved: https://github.com/facebook/flipper/pull/3334

Test Plan:
The change has been testes by running the desktop Flipper app locally from source.

## Preview (before & after)

#### Small App Window
<img width="390" alt="Screenshot 2022-01-24 at 11 58 40" align="left" src="https://user-images.githubusercontent.com/719641/150771900-cb25d110-82c7-4ba9-8ee5-07a093c4f702.png">
<img width="390" alt="Screenshot 2022-01-24 at 11 58 37" src="https://user-images.githubusercontent.com/719641/150771911-c81592ac-1eba-4112-86ad-9549e6248239.png">

<img width="390" alt="Screenshot 2022-01-24 at 12 00 13" align="left" src="https://user-images.githubusercontent.com/719641/150772045-de37c432-4381-4207-8476-5f142dfb6fa5.png">
<img width="390" alt="Screenshot 2022-01-24 at 12 00 10" src="https://user-images.githubusercontent.com/719641/150772057-574cf6cd-6f1a-4ca2-a343-b8fd6342eddb.png">

#### Maximised App Window
<img width="390" alt="Screenshot 2022-01-24 at 12 12 12" align="left" src="https://user-images.githubusercontent.com/719641/150772777-8ac3cb59-3b41-4dcb-9554-137e95857af8.png">
<img width="390" alt="Screenshot 2022-01-24 at 12 12 29" src="https://user-images.githubusercontent.com/719641/150772758-ca9f8c20-d6d0-412d-9067-7e756da0b56c.png">

Reviewed By: mweststrate

Differential Revision: D33741484

Pulled By: lblasa

fbshipit-source-id: 0c3ca883d051cf4fcce9f9c1b6688974b66fd0d8
---
 desktop/flipper-ui-core/src/chrome/PlatformSelectWizard.tsx     | 1 +
 desktop/flipper-ui-core/src/chrome/SettingsSheet.tsx            | 1 +
 .../flipper-ui-core/src/chrome/plugin-manager/PluginManager.tsx | 2 +-
 desktop/flipper-ui-core/src/sandy-chrome/SetupDoctorScreen.tsx  | 1 +
 desktop/flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx      | 1 +
 .../src/sandy-chrome/appinspect/LaunchEmulator.tsx              | 1 +
 6 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/desktop/flipper-ui-core/src/chrome/PlatformSelectWizard.tsx b/desktop/flipper-ui-core/src/chrome/PlatformSelectWizard.tsx
index 828eee8a2..5831a2682 100644
--- a/desktop/flipper-ui-core/src/chrome/PlatformSelectWizard.tsx
+++ b/desktop/flipper-ui-core/src/chrome/PlatformSelectWizard.tsx
@@ -123,6 +123,7 @@ class PlatformSelectWizard extends Component<Props, State> {
     return (
       <Modal
         visible
+        centered
         onCancel={() => {
           this.props.onHide();
           markWizardAsCompleted();
diff --git a/desktop/flipper-ui-core/src/chrome/SettingsSheet.tsx b/desktop/flipper-ui-core/src/chrome/SettingsSheet.tsx
index e42de8536..f824ad148 100644
--- a/desktop/flipper-ui-core/src/chrome/SettingsSheet.tsx
+++ b/desktop/flipper-ui-core/src/chrome/SettingsSheet.tsx
@@ -93,6 +93,7 @@ class SettingsSheet extends Component<Props, State> {
     return (
       <Modal
         visible
+        centered
         onCancel={this.props.onHide}
         width={570}
         title="Settings"
diff --git a/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginManager.tsx b/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginManager.tsx
index 7d8b54e58..e63b000e5 100644
--- a/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginManager.tsx
+++ b/desktop/flipper-ui-core/src/chrome/plugin-manager/PluginManager.tsx
@@ -15,7 +15,7 @@ import {Modal} from 'antd';
 
 export default function (props: {onHide: () => any}) {
   return (
-    <Modal width={800} visible onCancel={props.onHide} footer={null}>
+    <Modal visible centered width={800} onCancel={props.onHide} footer={null}>
       <Tabs>
         <Tab tab="Plugin Status">
           <PluginDebugger />
diff --git a/desktop/flipper-ui-core/src/sandy-chrome/SetupDoctorScreen.tsx b/desktop/flipper-ui-core/src/sandy-chrome/SetupDoctorScreen.tsx
index 99194c3bf..687b0861e 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/SetupDoctorScreen.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/SetupDoctorScreen.tsx
@@ -257,6 +257,7 @@ export default function SetupDoctorScreen(props: {
 
   return (
     <Modal
+      centered
       width={570}
       title="Setup Doctor"
       visible={props.visible}
diff --git a/desktop/flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx b/desktop/flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx
index 29d839751..647624641 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/WelcomeScreen.tsx
@@ -108,6 +108,7 @@ export default function WelcomeScreen({
 }) {
   return (
     <Modal
+      centered
       closable={false}
       visible={visible}
       footer={
diff --git a/desktop/flipper-ui-core/src/sandy-chrome/appinspect/LaunchEmulator.tsx b/desktop/flipper-ui-core/src/sandy-chrome/appinspect/LaunchEmulator.tsx
index 3873c9816..75994fdb9 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/appinspect/LaunchEmulator.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/appinspect/LaunchEmulator.tsx
@@ -139,6 +139,7 @@ export const LaunchEmulatorDialog = withTrackingScope(
     return (
       <Modal
         visible
+        centered
         onCancel={onClose}
         title="Launch Emulator"
         footer={null}