From ba382c7f4104fbc908b9b83e3c33fb4cca4a7ad9 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Tue, 14 Jul 2026 21:29:59 +0500 Subject: [PATCH 1/2] fix: #1291 tabs header menu alignment when there are more tabs --- .../comps/comps/tabs/tabbedContainerComp.tsx | 21 ++++++++++--------- .../packages/lowcoder/src/i18n/locales/en.ts | 2 +- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx index af7dd4acce..61fe0886ff 100644 --- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx @@ -73,7 +73,7 @@ const childrenMap = { headerStyle: styleControl(ContainerHeaderStyle , 'headerStyle'), bodyStyle: styleControl(TabBodyStyle , 'bodyStyle'), animationStyle: styleControl(AnimationStyle , 'animationStyle'), - tabsGutter: withDefault(NumberControl, 32), + tabsGutter: NumberControl, tabsCentered: withDefault(BoolControl, false), }; @@ -152,7 +152,6 @@ const StyledTabs = styled(Tabs)<{ $showHeader?: boolean; $animationStyle: AnimationStyleType; $isDestroyPane?: boolean; - $placement?: string; }>` &.ant-tabs { height: 100%; @@ -167,15 +166,15 @@ const StyledTabs = styled(Tabs)<{ height: 100%; } + /* Keep AntD flex nav so overflow "..." stays on the right. */ .ant-tabs-nav { - display: ${(props) => (props.$showHeader ? "block" : "none")}; + ${(props) => !props.$showHeader && `display: none;`} margin: 0px; } - .ant-tabs-tab + .ant-tabs-tab { - ${(props) => (props.$placement === "left" || props.$placement === "right") - ? `margin: 20px 0 0 0;` - : `margin: 0 0 0 20px;`} + /* tabBarGutter also margins the more button; keep "..." flush like AntD default. */ + .ant-tabs-nav-more { + margin-inline-start: 0 !important; } ${(props) => props.$style && getStyle(props.$style, props.$headerStyle, props.$bodyStyle)} @@ -315,7 +314,6 @@ const TabbedContainer = (props: TabbedContainerProps) => { $bodyStyle={bodyStyle} $showHeader={showHeader} $isDestroyPane={tabBehavior === "destroy"} - $placement={props.placement} onChange={(key) => { if (key !== props.selectedTabKey.value) { props.selectedTabKey.onChange(key); @@ -324,7 +322,7 @@ const TabbedContainer = (props: TabbedContainerProps) => { }} animated items={tabItems} - tabBarGutter={props.tabsGutter} + tabBarGutter={props.tabsGutter > 0 ? props.tabsGutter : undefined} centered={props.tabsCentered} /> @@ -384,7 +382,10 @@ export const TabbedContainerBaseComp = (function () {
{children.placement.propertyView({ label: trans("tabbedContainer.placement"), radioButton: true })} {children.tabsCentered.propertyView({ label: trans("tabbedContainer.tabsCentered")})} - { children.tabsGutter.propertyView({ label: trans("tabbedContainer.gutter"), tooltip : trans("tabbedContainer.gutterTooltip") })} + {children.tabsGutter.propertyView({ + label: trans("tabbedContainer.gutter"), + tooltip: trans("tabbedContainer.gutterTooltip"), + })} {children.horizontalGridCells.propertyView({ label: trans('prop.horizontalGridCells'), })} diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index ee3b6a47d5..35b5cd19da 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -3193,7 +3193,7 @@ export const en = { "placement" : "Tabs Placement", "showTabs": "Show Tabs", "gutter" : "Gap", - "gutterTooltip" : "The distance between tabs in px", + "gutterTooltip" : "Gap between tabs in px (Ant Design tabBarGutter). Leave empty for the default.", "tabsCentered" : "Centered Tabs", "destroyInactiveTab": "Destroy Inactive TabPane", "tabBehavior": "Tab Behavior", From 667f2405ebef9a63fb3cefb8ba4cffc4c7f9afda Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Tue, 14 Jul 2026 21:34:53 +0500 Subject: [PATCH 2/2] #1291 simplify logic tabs gutter --- .../lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx | 4 ++-- client/packages/lowcoder/src/i18n/locales/en.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx index 61fe0886ff..5a724e5f6b 100644 --- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx @@ -73,7 +73,7 @@ const childrenMap = { headerStyle: styleControl(ContainerHeaderStyle , 'headerStyle'), bodyStyle: styleControl(TabBodyStyle , 'bodyStyle'), animationStyle: styleControl(AnimationStyle , 'animationStyle'), - tabsGutter: NumberControl, + tabsGutter: withDefault(NumberControl, 32), tabsCentered: withDefault(BoolControl, false), }; @@ -322,7 +322,7 @@ const TabbedContainer = (props: TabbedContainerProps) => { }} animated items={tabItems} - tabBarGutter={props.tabsGutter > 0 ? props.tabsGutter : undefined} + tabBarGutter={props.tabsGutter} centered={props.tabsCentered} /> diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 35b5cd19da..c07aaf75aa 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -3193,7 +3193,7 @@ export const en = { "placement" : "Tabs Placement", "showTabs": "Show Tabs", "gutter" : "Gap", - "gutterTooltip" : "Gap between tabs in px (Ant Design tabBarGutter). Leave empty for the default.", + "gutterTooltip" : "Gap between tabs in px (Ant Design tabBarGutter). Default is 32.", "tabsCentered" : "Centered Tabs", "destroyInactiveTab": "Destroy Inactive TabPane", "tabBehavior": "Tab Behavior",