Fix databases truncated view bug

Summary:
The structure of the page is:
```
<FlexColumn>
  <Toolbar />
  <Content />
  <Toolbar />
</FelxColumn>
```

When Content is a FlexColumn, it doesn't play well with the others and uses all the space, to you don't see the bottom toolbar.
Changing it to a FlexRow fixes this. Also added an inner FlexColumn to make sure the behaviour for things inside Content isn't changed (flex-direction needs to be column in there).

Reviewed By: nikoant

Differential Revision: D19766120

fbshipit-source-id: 2872561bbc954db0d4dc3d7040f60c3eec6e3ff2

src/plugins/databases/index.js

@@ -1371,31 +1371,35 @@ export default class DatabasesPlugin extends FlipperPlugin<
             </Toolbar>
           </div>
         ) : null}
-        <FlexColumn grow={true}>
+        <FlexRow grow={true}>
-          {this.state.viewMode === 'data'
+          <FlexColumn grow={true}>
-            ? renderTable(this.state.currentPage, this)
+            {this.state.viewMode === 'data'
-            : null}
+              ? renderTable(this.state.currentPage, this)
-          {this.state.viewMode === 'structure' ? this.renderStructure() : null}
+              : null}
-          {this.state.viewMode === 'SQL'
+            {this.state.viewMode === 'structure'
-            ? this.renderQuery(this.state.queryResult)
+              ? this.renderStructure()
-            : null}
+              : null}
-          {this.state.viewMode === 'tableInfo' ? (
+            {this.state.viewMode === 'SQL'
-            <Textarea
+              ? this.renderQuery(this.state.queryResult)
-              style={{
+              : null}
-                width: '98%',
+            {this.state.viewMode === 'tableInfo' ? (
-                height: '100%',
+              <Textarea
-                marginLeft: '1%',
+                style={{
-                marginTop: '1%',
+                  width: '98%',
-                marginBottom: '1%',
+                  height: '100%',
-                readOnly: true,
+                  marginLeft: '1%',
-              }}
+                  marginTop: '1%',
-              value={sqlFormatter.format(this.state.tableInfo)}
+                  marginBottom: '1%',
-            />
+                  readOnly: true,
-          ) : null}
+                }}
-          {this.state.viewMode === 'queryHistory'
+                value={sqlFormatter.format(this.state.tableInfo)}
-            ? renderQueryHistory(this.state.queryHistory)
+              />
-            : null}
+            ) : null}
-        </FlexColumn>
+            {this.state.viewMode === 'queryHistory'
+              ? renderQueryHistory(this.state.queryHistory)
+              : null}
+          </FlexColumn>
+        </FlexRow>
         <Toolbar position="bottom" style={{paddingLeft: 8}}>
           <FlexRow grow={true}>
             {this.state.viewMode === 'SQL' && this.state.executionTime !== 0 ? (