From c0fac382821b00c95b3189620dfb958a2bb13f61 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Tue, 4 Jan 2022 08:31:14 -0800
Subject: [PATCH] Fix horizontal scroll in Databases plugin

Summary:
changelog: make sure database plugin is horizontally scrollable

fixes https://github.com/facebook/flipper/issues/2306

(assumed that'd be fixed by previous diff, but the plugin doesn't use the `DataTable` abstraction yet, athough it has a component with the same name :')

Reviewed By: cekkaewnumchai

Differential Revision: D33368215

fbshipit-source-id: f6a9b876ba3cd4aea7faa85b045a7614278e1c86
---
 .../public/databases/DatabasesPlugin.tsx      | 70 +++++++++----------
 1 file changed, 34 insertions(+), 36 deletions(-)

diff --git a/desktop/plugins/public/databases/DatabasesPlugin.tsx b/desktop/plugins/public/databases/DatabasesPlugin.tsx
index fa4747499..b75b582c2 100644
--- a/desktop/plugins/public/databases/DatabasesPlugin.tsx
+++ b/desktop/plugins/public/databases/DatabasesPlugin.tsx
@@ -278,7 +278,7 @@ const QueryTable = React.memo(
       const columns = table.columns;
       const rows = table.rows;
       return (
-        <Layout.Horizontal grow>
+        <Layout.Container grow>
           <ManagedTable
             floating={false}
             multiline
@@ -304,7 +304,7 @@ const QueryTable = React.memo(
               columnValues={table.rows[table.highlightedRows[0]]}
             />
           )}
-        </Layout.Horizontal>
+        </Layout.Container>
       );
     } else if (query.id && query.id !== null) {
       return (
@@ -744,40 +744,38 @@ export function Component() {
           </Toolbar>
         </Layout.Container>
       ) : null}
-      <Layout.Horizontal grow>
-        <Layout.Container grow>
-          {state.viewMode === 'data' ? (
-            <DataTable
-              page={state.currentPage}
-              highlightedRowsChanged={pageHighlightedRowsChanged}
-              onRowEdited={onRowEdited}
-              sortOrderChanged={sortOrderChanged}
-              currentSort={state.currentSort}
-              currentStructure={state.currentStructure}
-            />
-          ) : null}
-          {state.viewMode === 'structure' && state.currentStructure ? (
-            <DatabaseStructure structure={state.currentStructure} />
-          ) : null}
-          {state.viewMode === 'SQL' ? (
-            <QueryTable
-              query={state.queryResult}
-              highlightedRowsChanged={queryHighlightedRowsChanged}
-            />
-          ) : null}
-          {state.viewMode === 'tableInfo' ? (
-            <Layout.Horizontal
-              grow
-              pad={theme.space.small}
-              style={{paddingBottom: 0}}>
-              <TextArea value={sqlFormatter.format(state.tableInfo)} readOnly />
-            </Layout.Horizontal>
-          ) : null}
-          {state.viewMode === 'queryHistory' ? (
-            <QueryHistory history={state.queryHistory} />
-          ) : null}
-        </Layout.Container>
-      </Layout.Horizontal>
+      <Layout.Container grow>
+        {state.viewMode === 'data' ? (
+          <DataTable
+            page={state.currentPage}
+            highlightedRowsChanged={pageHighlightedRowsChanged}
+            onRowEdited={onRowEdited}
+            sortOrderChanged={sortOrderChanged}
+            currentSort={state.currentSort}
+            currentStructure={state.currentStructure}
+          />
+        ) : null}
+        {state.viewMode === 'structure' && state.currentStructure ? (
+          <DatabaseStructure structure={state.currentStructure} />
+        ) : null}
+        {state.viewMode === 'SQL' ? (
+          <QueryTable
+            query={state.queryResult}
+            highlightedRowsChanged={queryHighlightedRowsChanged}
+          />
+        ) : null}
+        {state.viewMode === 'tableInfo' ? (
+          <Layout.Horizontal
+            grow
+            pad={theme.space.small}
+            style={{paddingBottom: 0}}>
+            <TextArea value={sqlFormatter.format(state.tableInfo)} readOnly />
+          </Layout.Horizontal>
+        ) : null}
+        {state.viewMode === 'queryHistory' ? (
+          <QueryHistory history={state.queryHistory} />
+        ) : null}
+      </Layout.Container>
       <Toolbar position="bottom" style={{paddingLeft: 8}}>
         <Layout.Horizontal grow>
           {state.viewMode === 'SQL' && state.executionTime !== 0 ? (