From 4a5aacad8fbba1192e0efa1c117195128a6b266c Mon Sep 17 00:00:00 2001
From: justinpark <justin.hojun.park@gmail.com>
Date: Fri, 21 Jul 2023 13:26:48 -0700
Subject: [PATCH 1/2] fix(sqllab): Replace margin style by gap on query results

---
 .../src/SqlLab/components/ResultSet/index.tsx         | 11 ++++++++---
 .../src/SqlLab/components/SouthPane/index.tsx         |  2 --
 .../src/components/FilterableTable/index.tsx          |  1 -
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
index b5ca377de6ee8..f8021914f1bac 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
@@ -81,6 +81,12 @@ export interface ResultSetProps {
   defaultQueryLimit: number;
 }
 
+const ResultContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.gridUnit * 2}px;
+`;
+
 const ResultlessStyles = styled.div`
   position: relative;
   min-height: ${({ theme }) => theme.gridUnit * 25}px;
@@ -110,7 +116,6 @@ const ReturnedRows = styled.div`
 const ResultSetControls = styled.div`
   display: flex;
   justify-content: space-between;
-  padding: ${({ theme }) => 2 * theme.gridUnit}px 0;
 `;
 
 const ResultSetButtons = styled.div`
@@ -494,7 +499,7 @@ const ResultSet = ({
         ? results.expanded_columns.map(col => col.column_name)
         : [];
       return (
-        <>
+        <ResultContainer>
           {renderControls()}
           {renderRowsReturned()}
           {sql}
@@ -505,7 +510,7 @@ const ResultSet = ({
             filterText={searchText}
             expandedColumns={expandedColumns}
           />
-        </>
+        </ResultContainer>
       );
     }
     if (data && data.length === 0) {
diff --git a/superset-frontend/src/SqlLab/components/SouthPane/index.tsx b/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
index 047bfebd65f0e..8b773986be546 100644
--- a/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
@@ -71,8 +71,6 @@ const StyledPane = styled.div<StyledPaneProps>`
     }
   }
   .ant-tabs-tabpane {
-    display: flex;
-    flex-direction: column;
     .scrollable {
       overflow-y: auto;
     }
diff --git a/superset-frontend/src/components/FilterableTable/index.tsx b/superset-frontend/src/components/FilterableTable/index.tsx
index 2ca38617fccbf..91fc1f4477f2c 100644
--- a/superset-frontend/src/components/FilterableTable/index.tsx
+++ b/superset-frontend/src/components/FilterableTable/index.tsx
@@ -77,7 +77,6 @@ const StyledFilterableTable = styled.div`
   ${({ theme }) => `
     height: 100%;
     overflow: hidden;
-    margin-top: ${theme.gridUnit * 2}px;
 
     .ant-table-cell {
       font-weight: ${theme.typography.weights.bold};

From e4993fdb30b54be81639a7bd7fb0a544b2c70133 Mon Sep 17 00:00:00 2001
From: justinpark <justin.hojun.park@gmail.com>
Date: Mon, 24 Jul 2023 13:42:23 -0700
Subject: [PATCH 2/2] replace to row-gap to specify the area

---
 superset-frontend/src/SqlLab/components/ResultSet/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
index f8021914f1bac..845c784a34a1e 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
@@ -84,7 +84,7 @@ export interface ResultSetProps {
 const ResultContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: ${({ theme }) => theme.gridUnit * 2}px;
+  row-gap: ${({ theme }) => theme.gridUnit * 2}px;
 `;
 
 const ResultlessStyles = styled.div`