From f8f91fa5577deb5c565f377eec627d1d51447273 Mon Sep 17 00:00:00 2001
From: Josue Lugaro <josuelugaro15@gmail.com>
Date: Wed, 19 Jan 2022 13:45:12 -0600
Subject: [PATCH] Fixed issues as per Lindsey's comment

---
 .../components/SqlEditorLeftBar/index.jsx     | 51 ++++++++++---------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.jsx
index 296a6d16e9c5a..0f0750eabbe7a 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.jsx
@@ -47,8 +47,25 @@ const StyledScrollbarContainer = styled.div`
   overflow: auto;
 `;
 
-const StyledScrollbarContent = styled.div`
-  height: ${props => props.contentHeight}px;
+const collapseStyles = css`
+  .ant-collapse-item {
+    margin-bottom: ${({ theme }) => theme.gridUnit * 3}px;
+  }
+  .ant-collapse-header {
+    padding: 0px !important;
+    display: flex;
+    align-items: center;
+  }
+  .ant-collapse-content-box {
+    padding: 0px ${({ theme }) => theme.gridUnit * 4}px 0px 0px !important;
+  }
+  .ant-collapse-arrow {
+    top: ${({ theme }) => theme.gridUnit * 2}px !important;
+    color: ${({ theme }) => theme.colors.primary.dark1} !important;
+    &: hover {
+      color: ${({ theme }) => theme.colors.primary.dark2} !important;
+    }
+  }
 `;
 
 export default function SqlEditorLeftBar({
@@ -118,31 +135,17 @@ export default function SqlEditorLeftBar({
       />
       <div className="divider" />
       <StyledScrollbarContainer>
-        <StyledScrollbarContent contentHeight={tableMetaDataHeight}>
+        <div
+          css={css`
+            height: ${props => props.contentHeight}px;
+          `}
+          contentHeight={tableMetaDataHeight}
+        >
           <Collapse
             activeKey={tb
               .filter(({ expanded }) => expanded)
               .map(({ id }) => id)}
-            css={theme => css`
-              .ant-collapse-item {
-                margin-bottom: ${theme.gridUnit * 3}px;
-              }
-              .ant-collapse-header {
-                padding: 0px !important;
-                display: flex;
-                align-items: center;
-              }
-              .ant-collapse-content-box {
-                padding: 0px ${theme.gridUnit * 4}px 0px 0px !important;
-              }
-              .ant-collapse-arrow {
-                top: ${theme.gridUnit * 2}px !important;
-                color: ${theme.colors.primary.dark1} !important;
-                &: hover {
-                  color: ${theme.colors.primary.dark2} !important;
-                }
-              }
-            `}
+            css={collapseStyles}
             expandIconPosition="right"
             ghost
             onChange={onToggleTable}
@@ -152,7 +155,7 @@ export default function SqlEditorLeftBar({
               <TableElement table={table} key={table.id} actions={actions} />
             ))}
           </Collapse>
-        </StyledScrollbarContent>
+        </div>
       </StyledScrollbarContainer>
       {shouldShowReset && (
         <Button