admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix overlay scroll gaps (#4512)

Browse Source 
* fix overlay scroll leaving gap

* fixed tests

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
brendanlaschke
2024-03-31 10:53:37 +02:00
committed by GitHub
parent da8f1b0a66
commit aacb3763e7
10 changed files with 89 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
View File

@ -5,6 +5,7 @@ import { useRecoilValue } from 'recoil';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { Tab } from './Tab';
@ -30,7 +31,6 @@ const StyledContainer = styled.div`
height: 40px;
padding-left: ${({ theme }) => theme.spacing(2)};
user-select: none;
overflow: auto;
`;
export const TabList = ({ tabs, tabListId }: TabListProps) => {
@ -46,24 +46,26 @@ export const TabList = ({ tabs, tabListId }: TabListProps) => {
return (
<TabListScope tabListScopeId={tabListId}>
<StyledContainer>
{tabs
.filter((tab) => !tab.hide)
.map((tab) => (
<Tab
id={tab.id}
key={tab.id}
title={tab.title}
Icon={tab.Icon}
active={tab.id === activeTabId}
onClick={() => {
setActiveTabId(tab.id);
}}
disabled={tab.disabled}
hasBetaPill={tab.hasBetaPill}
/>
))}
</StyledContainer>
<ScrollWrapper hideY>
<StyledContainer>
{tabs
.filter((tab) => !tab.hide)
.map((tab) => (
<Tab
id={tab.id}
key={tab.id}
title={tab.title}
Icon={tab.Icon}
active={tab.id === activeTabId}
onClick={() => {
setActiveTabId(tab.id);
}}
disabled={tab.disabled}
hasBetaPill={tab.hasBetaPill}
/>
))}
</StyledContainer>
</ScrollWrapper>
</TabListScope>
);
};