Some fixes in rendering legacy plugins

Summary:
Some exploratory testing on all iOS and Android plugins, to see how they behave inside Sandy, and fixed some layout glitches (some were also present without Sandy)

General fixes:
* Introduced some niceties like searchbox resizing properly, and toolbars wrapping automatically in Sandy, rather than buttons becoming invisible
* Containers don't grow anymore by default, but take size of contents
* ScrollContainer child is now a Layout.Vertical. Layout.Vertical should be used as default container everywhere (e.g. Tabs, Panels) in the future
* Fixed layout issue if a split container had only 1 visible child
* DetailsSidebar now scrolls vertically by default
* Details sidebar would sometimes render content in-place rather than in the reserved area
* AppSelector dropdown and Plugin list will now properly ellipse (...) if there is not enough space

Plugin fixes:
* Long database / table names in Database plugin would break layout

Also fixes https://github.com/facebook/flipper/issues/1611

Reviewed By: passy

Differential Revision: D24454188

fbshipit-source-id: c60c867270900a1d4f28587d47067c6ec1072ede

desktop/app/src/ui/components/Toolbar.tsx

@@ -12,9 +12,9 @@ import {colors} from './colors';
 import FlexRow from './FlexRow';
 import FlexBox from './FlexBox';
 import styled from '@emotion/styled';
-import {Space} from 'antd';
 import {useIsSandy} from '../../sandy-chrome/SandyContext';
 import {theme} from '../../sandy-chrome/theme';
+import Layout from './Layout';
 
 /**
  * A toolbar.
@@ -42,8 +42,8 @@ const ToolbarContainer = styled(FlexRow)<{
 }));
 ToolbarContainer.displayName = 'ToolbarContainer';
 
-const SandyToolbarContainer = styled(Space)({
-  width: '100%',
+const SandyToolbarContainer = styled(Layout.Horizontal)({
+  flexWrap: 'wrap',
   padding: theme.space.small,
   boxShadow: `inset 0px -1px 0px ${theme.dividerColor}`,
 });
@@ -65,7 +65,9 @@ export default function Toolbar({
 }) {
   const isSandy = useIsSandy();
   return isSandy ? (
-    <SandyToolbarContainer style={style}>{children}</SandyToolbarContainer>
+    <SandyToolbarContainer style={style} gap={theme.space.small} center>
+      {children}
+    </SandyToolbarContainer>
   ) : (
     <ToolbarContainer style={style} {...rest}>
       {children}