Tablist bottom margin fix (#10801)
### Bug The active tab bottom border appeared slightly above the TabList's light bottom border. ### Investigation - Initial fix: Adjusted margin-bottom to -1px in Tab component to align borders - This fix caused active bottom borders to disappear in tabs wrapped with ShowPageSubContainerTabListContainer - Found that ShowPageSubContainerTabListContainer was adding a redundant bottom border that overlapped with TabList's border ### Solution - Removed ShowPageSubContainerTabListContainer to eliminate the redundant border - Kept the -1px margin-bottom fix in Tab component - This ensures consistent border behavior across all TabList implementations
This commit is contained in:
@ -41,7 +41,7 @@ const StyledTab = styled('button', {
|
||||
display: flex;
|
||||
gap: ${({ theme }) => theme.spacing(1)};
|
||||
justify-content: center;
|
||||
margin-bottom: 0;
|
||||
margin-bottom: -1px;
|
||||
padding: ${({ theme }) => theme.spacing(2) + ' 0'};
|
||||
pointer-events: ${({ disabled }) => (disabled ? 'none' : '')};
|
||||
text-decoration: none;
|
||||
|
||||
@ -33,7 +33,7 @@ const StyledContainer = styled.div`
|
||||
border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
gap: ${({ theme }) => theme.spacing(1)};
|
||||
height: 40px;
|
||||
user-select: none;
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user