Fix regression in accessibility layout

Summary:
Fixes a regression (D21716761) in the layout of the accessibility inspector where the layout was accidentally switched from right to bottom.

Also made the region resizable while at it.

Changelog: Fix regression in the layout plugin where accessibility info was rendered in the wrong place

Reviewed By: cekkaewnumchai

Differential Revision: D21903760

fbshipit-source-id: 08623c17428e86ea77d8438e78766a308dbac1e6

desktop/plugins/layout/index.tsx

@@ -12,24 +12,17 @@ import {
   Element,
   ElementSearchResultSet,
   PluginClient,
-  FlexRow,
   FlipperPlugin,
   Toolbar,
   DetailSidebar,
-  VerticalRule,
   Button,
   GK,
   Idler,
-  Text,
-  styled,
-  colors,
-  SupportRequestFormV2,
-  constants,
   ReduxState,
   ArchivedDevice,
   ToolbarIcon,
   Layout,
-  Scrollable,
+  Sidebar,
 } from 'flipper';
 import Inspector from './Inspector';
 import InspectorSidebar from './InspectorSidebar';
@@ -372,17 +365,14 @@ export default class LayoutPlugin extends FlipperPlugin<
     );
 
     const axInspector = this.state.inAXMode ? (
-      <FlexRow style={{height: '100%'}}>
+      <Sidebar width={400} backgroundColor="white" position="right">
-        <VerticalRule />
-        <Scrollable>
         <Inspector
           {...inspectorProps}
           onSelect={(selectedAXElement) => this.setState({selectedAXElement})}
           showsSidebar={true}
           ax
         />
-        </Scrollable>
+      </Sidebar>
-      </FlexRow>
     ) : null;
 
     const showAnalyzeYogaPerformanceButton = GK.get('flipper_yogaperformance');
@@ -440,10 +430,10 @@ export default class LayoutPlugin extends FlipperPlugin<
               initialQuery={this.props.deepLinkPayload}
             />
           </Toolbar>
-          <Layout.Bottom>
+          <Layout.Right>
             {inspector}
             {axInspector}
-          </Layout.Bottom>
+          </Layout.Right>
         </Layout.Top>
 
         <DetailSidebar>