From db4c341eb37fc1175f098fde0777a772dd14d79f Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Fri, 5 Jun 2020 08:32:25 -0700
Subject: [PATCH] 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 | 32 +++++++++++---------------------
 1 file changed, 11 insertions(+), 21 deletions(-)

diff --git a/desktop/plugins/layout/index.tsx b/desktop/plugins/layout/index.tsx
index 8b14daf1d..34a30622b 100644
--- a/desktop/plugins/layout/index.tsx
+++ b/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%'}}>
-        <VerticalRule />
-        <Scrollable>
-          <Inspector
-            {...inspectorProps}
-            onSelect={(selectedAXElement) => this.setState({selectedAXElement})}
-            showsSidebar={true}
-            ax
-          />
-        </Scrollable>
-      </FlexRow>
+      <Sidebar width={400} backgroundColor="white" position="right">
+        <Inspector
+          {...inspectorProps}
+          onSelect={(selectedAXElement) => this.setState({selectedAXElement})}
+          showsSidebar={true}
+          ax
+        />
+      </Sidebar>
     ) : 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>