fix issue where row backgrounds are not continued when scrolling horizontally

Summary:
We used flexbox to layout rows in the element inspector. The problem with that is that flexbox cannot nicely grow all its childrens to the largest one. Although we could still see contents thanks to the `overflow: visible` hack, this means that the backgrounds didn't continue when scrolling.

In contrast, tables do grow their children width :)

Also fixed an issue where the AX details tree wasn't scrollable

Reviewed By: cekkaewnumchai

Differential Revision: D21661766

fbshipit-source-id: 6b1d16c7aded8beebdd8a50f3e8ab0d9b8633e02

desktop/plugins/layout/index.tsx

@@ -29,6 +29,7 @@ import {
   ArchivedDevice,
   ToolbarIcon,
   Layout,
+  Scrollable,
 } from 'flipper';
 import Inspector from './Inspector';
 import InspectorSidebar from './InspectorSidebar';
@@ -410,14 +411,16 @@ export default class LayoutPlugin extends FlipperPlugin<
     );
 
     const axInspector = this.state.inAXMode ? (
-      <FlexRow>
+      <FlexRow style={{height: '100%'}}>
         <VerticalRule />
-        <Inspector
-          {...inspectorProps}
-          onSelect={(selectedAXElement) => this.setState({selectedAXElement})}
-          showsSidebar={true}
-          ax
-        />
+        <Scrollable>
+          <Inspector
+            {...inspectorProps}
+            onSelect={(selectedAXElement) => this.setState({selectedAXElement})}
+            showsSidebar={true}
+            ax
+          />
+        </Scrollable>
       </FlexRow>
     ) : null;