From 9aef9c5764ebf995c9ab8955684b408397037e1e Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Thu, 15 Oct 2020 17:38:13 +0200
Subject: [PATCH] fix: Fix styling in SqlLab when tabs overflow (#11287)

* Fix styling in SqlLab when tabs overflow

* Use theme variables
---
 .../src/SqlLab/components/TabbedSqlEditors.jsx         | 10 ++++++++--
 superset-frontend/src/common/components/Dropdown.tsx   |  5 +++--
 superset-frontend/src/common/components/Tabs.tsx       |  3 ---
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx b/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx
index 5461645476..a916798572 100644
--- a/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx
+++ b/superset-frontend/src/SqlLab/components/TabbedSqlEditors.jsx
@@ -58,6 +58,12 @@ const defaultProps = {
 
 let queryCount = 1;
 
+const TabTitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 const TabTitle = styled.span`
   margin-right: ${({ theme }) => theme.gridUnit * 2}px;
 `;
@@ -354,12 +360,12 @@ class TabbedSqlEditors extends React.PureComponent {
       );
 
       const tabHeader = (
-        <>
+        <TabTitleWrapper>
           <div data-test="dropdown-toggle-button">
             <Dropdown overlay={menu} trigger={['click']} />
           </div>
           <TabTitle>{qe.title}</TabTitle> <TabStatusIcon tabState={state} />{' '}
-        </>
+        </TabTitleWrapper>
       );
       return (
         <EditableTabs.TabPane
diff --git a/superset-frontend/src/common/components/Dropdown.tsx b/superset-frontend/src/common/components/Dropdown.tsx
index 18ac168129..cfef8e09a9 100644
--- a/superset-frontend/src/common/components/Dropdown.tsx
+++ b/superset-frontend/src/common/components/Dropdown.tsx
@@ -32,6 +32,7 @@ const MenuDots = styled.div`
   ${dotStyle};
   font-weight: ${({ theme }) => theme.typography.weights.normal};
   display: inline-flex;
+  position: relative;
 
   &:hover {
     background-color: ${({ theme }) => theme.colors.primary.base};
@@ -50,11 +51,11 @@ const MenuDots = styled.div`
   }
 
   &::before {
-    transform: translateY(-${({ theme }) => theme.gridUnit}px);
+    top: ${({ theme }) => theme.gridUnit}px;
   }
 
   &::after {
-    transform: translateY(${({ theme }) => theme.gridUnit}px);
+    bottom: ${({ theme }) => theme.gridUnit}px;
   }
 `;
 
diff --git a/superset-frontend/src/common/components/Tabs.tsx b/superset-frontend/src/common/components/Tabs.tsx
index 9346d0aa4c..e87f7835dd 100644
--- a/superset-frontend/src/common/components/Tabs.tsx
+++ b/superset-frontend/src/common/components/Tabs.tsx
@@ -52,10 +52,7 @@ const StyledTabs = styled(AntdTabs, {
     `};
 
   .ant-tabs-tab-btn {
-    display: flex;
     flex: 1 1 auto;
-    align-items: center;
-    justify-content: center;
     font-size: ${({ theme }) => theme.typography.sizes.s}px;
     text-align: center;
     text-transform: uppercase;