From 15ed856388a8f6a1fce254e5eaad205d52813a70 Mon Sep 17 00:00:00 2001
From: John Knox <jknox@fb.com>
Date: Thu, 6 Feb 2020 06:12:09 -0800
Subject: [PATCH] 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 | 54 ++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/plugins/databases/index.js b/src/plugins/databases/index.js
index a044c39e8..3ba828fc5 100644
--- a/src/plugins/databases/index.js
+++ b/src/plugins/databases/index.js
@@ -1371,31 +1371,35 @@ export default class DatabasesPlugin extends FlipperPlugin<
             </Toolbar>
           </div>
         ) : null}
-        <FlexColumn grow={true}>
-          {this.state.viewMode === 'data'
-            ? renderTable(this.state.currentPage, this)
-            : null}
-          {this.state.viewMode === 'structure' ? this.renderStructure() : null}
-          {this.state.viewMode === 'SQL'
-            ? this.renderQuery(this.state.queryResult)
-            : null}
-          {this.state.viewMode === 'tableInfo' ? (
-            <Textarea
-              style={{
-                width: '98%',
-                height: '100%',
-                marginLeft: '1%',
-                marginTop: '1%',
-                marginBottom: '1%',
-                readOnly: true,
-              }}
-              value={sqlFormatter.format(this.state.tableInfo)}
-            />
-          ) : null}
-          {this.state.viewMode === 'queryHistory'
-            ? renderQueryHistory(this.state.queryHistory)
-            : null}
-        </FlexColumn>
+        <FlexRow grow={true}>
+          <FlexColumn grow={true}>
+            {this.state.viewMode === 'data'
+              ? renderTable(this.state.currentPage, this)
+              : null}
+            {this.state.viewMode === 'structure'
+              ? this.renderStructure()
+              : null}
+            {this.state.viewMode === 'SQL'
+              ? this.renderQuery(this.state.queryResult)
+              : null}
+            {this.state.viewMode === 'tableInfo' ? (
+              <Textarea
+                style={{
+                  width: '98%',
+                  height: '100%',
+                  marginLeft: '1%',
+                  marginTop: '1%',
+                  marginBottom: '1%',
+                  readOnly: true,
+                }}
+                value={sqlFormatter.format(this.state.tableInfo)}
+              />
+            ) : null}
+            {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 ? (