feat(core): align tabs

allclinics · Oct 7, 2024 · f46e220 · f46e220
1 parent f2860fc
commit f46e220
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/superset-frontend/src/components/Tabs/Tabs.tsx b/superset-frontend/src/components/Tabs/Tabs.tsx
@@ -166,7 +166,7 @@ export const StyledLineEditableTabs = styled(EditableTabs)<{
     background: transparent;
     border: none;
     border-radius: ${({ isChild }) => (isChild ? '20px' : '0px')};
-    max-width: ${({ isChild }) => (isChild ? '342px' : 'unset')};
+    max-width: unset;
     width: ${({ isChild }) => (isChild ? '100%' : 'unset')};
     height: ${({ isChild }) => (isChild ? '48px' : 'unset')};
 

diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
@@ -17,6 +17,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+/* eslint-disable no-extra-boolean-cast */
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -155,13 +156,14 @@ class Tab extends React.PureComponent {
     return item.type !== TAB_TYPE;
   }
 
-  calculateNewColumnWidth = oldColumnWidth => {
+  calculateNewColumnWidth = (oldColumnWidth, isChild) => {
     const width =
       (oldColumnWidth + GRID_GUTTER_SIZE) * GRID_COLUMN_COUNT -
       GRID_GUTTER_SIZE;
 
     return (
-      (width + GRID_GUTTER_SIZE - GRID_HORIZINTAL_PADDING) / GRID_COLUMN_COUNT -
+      (width + GRID_GUTTER_SIZE - (!!isChild ? 48 : GRID_HORIZINTAL_PADDING)) /
+        GRID_COLUMN_COUNT -
       GRID_GUTTER_SIZE
     );
   };
@@ -255,7 +257,7 @@ class Tab extends React.PureComponent {
               onDrop={this.handleDrop}
               onHover={this.handleOnHover}
               availableColumnCount={availableColumnCount}
-              columnWidth={this.calculateNewColumnWidth(columnWidth)}
+              columnWidth={this.calculateNewColumnWidth(columnWidth, isChild)}
               onResizeStart={onResizeStart}
               onResize={onResize}
               onResizeStop={onResizeStop}

diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
@@ -113,7 +113,7 @@ const StyledTabsContainer = styled.div`
     min-height: ${({ theme }) => theme.gridUnit * 12}px;
     margin-top: ${({ theme }) => theme.gridUnit / 4}px;
     position: relative;
-    padding: 0px 24px;
+    padding: ${({ isChild }) => (isChild ? '0px' : '0px 24px')};
   }
 
   .ant-tabs {
@@ -393,6 +393,7 @@ export class Tabs extends React.PureComponent {
           <StyledTabsContainer
             className="dashboard-component dashboard-component-tabs"
             data-test="dashboard-component-tabs"
+            isChild={isChild}
           >
             {editMode && renderHoverMenu && (
               <HoverMenu innerRef={tabsDragSourceRef} position="left">

diff --git a/superset-frontend/src/dashboard/util/constants.ts b/superset-frontend/src/dashboard/util/constants.ts
@@ -43,7 +43,7 @@ export const GRID_MIN_ROW_UNITS = 5;
 export const GRID_MAX_ROW_UNITS = 100;
 export const GRID_MIN_ROW_HEIGHT = GRID_GUTTER_SIZE;
 export const GRID_DEFAULT_CHART_WIDTH = 4;
-export const GRID_HORIZINTAL_PADDING = 48;
+export const GRID_HORIZINTAL_PADDING = 0;
 
 // Header types
 export const SMALL_HEADER = 'SMALL_HEADER';