fix: Fix styling in SqlLab when tabs overflow (#11287)

* Fix styling in SqlLab when tabs overflow

* Use theme variables

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

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;
   }
 `;
 

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;