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
30 lines
762 B
TypeScript
30 lines
762 B
TypeScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import React from 'react';
|
|
import {Tab, Tabs} from 'flipper-plugin';
|
|
import PluginDebugger from './PluginDebugger';
|
|
import PluginInstaller from './PluginInstaller';
|
|
import {Modal} from 'antd';
|
|
|
|
export default function (props: {onHide: () => any}) {
|
|
return (
|
|
<Modal visible centered width={800} onCancel={props.onHide} footer={null}>
|
|
<Tabs>
|
|
<Tab tab="Plugin Status">
|
|
<PluginDebugger />
|
|
</Tab>
|
|
<Tab tab="Install Plugins">
|
|
<PluginInstaller autoHeight />
|
|
</Tab>
|
|
</Tabs>
|
|
</Modal>
|
|
);
|
|
}
|