diff --git a/datahub-web-react/src/alchemy-components/components/Tabs/Tabs.tsx b/datahub-web-react/src/alchemy-components/components/Tabs/Tabs.tsx index a8d5bc9ef1..b9a82734de 100644 --- a/datahub-web-react/src/alchemy-components/components/Tabs/Tabs.tsx +++ b/datahub-web-react/src/alchemy-components/components/Tabs/Tabs.tsx @@ -34,7 +34,6 @@ const StyledTabsPrimary = styled(AntTabs)<{ return ''; }} ${({ $scrollable }) => !$scrollable && 'overflow: hidden;'} - .ant-tabs-tab { padding: 8px 0; font-size: 14px; @@ -53,7 +52,6 @@ const StyledTabsPrimary = styled(AntTabs)<{ margin-left: 16px; } `} - ${({ $hideTabsHeader }) => $hideTabsHeader && ` @@ -61,7 +59,6 @@ const StyledTabsPrimary = styled(AntTabs)<{ display: none; } `} - ${({ $stickyHeader }) => $stickyHeader && ` @@ -72,7 +69,6 @@ const StyledTabsPrimary = styled(AntTabs)<{ background-color: white; } `} - .ant-tabs-tab-active .ant-tabs-tab-btn { color: ${(props) => props.theme.styles['primary-color']}; font-weight: 600; @@ -134,7 +130,6 @@ const StyledTabsSecondary = styled(AntTabs)<{ margin-left: 8px; } `} - ${({ $hideTabsHeader }) => $hideTabsHeader && ` @@ -142,7 +137,6 @@ const StyledTabsSecondary = styled(AntTabs)<{ display: none; } `} - .ant-tabs-tab-active { background-color: ${(props) => props.theme.styles['primary-color-light']}80; } @@ -167,6 +161,7 @@ const StyledTabsSecondary = styled(AntTabs)<{ .ant-tabs-nav { margin-bottom: ${(props) => props.$navMarginBottom ?? 0}px; margin-top: ${(props) => props.$navMarginTop ?? 0}px; + &::before { display: none; } @@ -271,7 +266,6 @@ export function Tabs({ maxHeight = '100%', stickyHeader = false, }: Props) { - const { TabPane } = AntTabs; const tabsContainerRef = useRef(null); // Scroll to top when selectedTab changes if scrollToTopOnChange is enabled @@ -308,9 +302,20 @@ export function Tabs({ const StyledTabs = secondary ? StyledTabsSecondary : StyledTabsPrimary; + const items = tabs.map((tab) => ({ + key: tab.key, + label: , + disabled: tab.disabled, + children: ( + + {tab.component} + + ), + })); const tabsContent = ( { if (onChange) onChange(key); if (urlMap && onUrlChange && urlMap[key]) { @@ -324,17 +329,7 @@ export function Tabs({ $hideTabsHeader={!!hideTabsHeader} $scrollable={scrollToTopOnChange} $stickyHeader={stickyHeader} - > - {tabs.map((tab) => { - return ( - } key={tab.key} disabled={tab.disabled}> - - {tab.component} - - - ); - })} - + /> ); if (scrollToTopOnChange) { diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/AboutSection/SidebarAboutSection.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/AboutSection/SidebarAboutSection.tsx index 855c6b5c3b..802765dc9b 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/AboutSection/SidebarAboutSection.tsx +++ b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/AboutSection/SidebarAboutSection.tsx @@ -55,15 +55,15 @@ export const SidebarAboutSection = ({ properties, readOnly }: Props) => { title="Documentation" content={ <> - {displayedDescription && [ + {displayedDescription && ( , - ]} + /> + )} {hasContent && } - {!hasContent && []} + {!hasContent && } } extra={