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

Scroll behavior part 2 (#1304)

Browse Source 
* Fix layout issues introduced by scroll behavior

* Complete scrollbar work
This commit is contained in:
Charles Bochet
2023-08-25 12:38:45 +02:00
committed by GitHub
parent 0d210244db
commit de569f4c06
11 changed files with 162 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
front/src/modules/ui/layout/components/ShowPageContainer.tsx
View File

@ -2,14 +2,26 @@ import { ReactElement } from 'react';
import styled from '@emotion/styled';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
export const StyledShowPageContainer = styled.div`
const StyledOuterContainer = styled.div`
display: flex;
flex-direction: ${() => (useIsMobile() ? 'column' : 'row')};
gap: ${({ theme }) => (useIsMobile() ? theme.spacing(3) : '0')};
height: ${() => (useIsMobile() ? '100%' : 'auto')};
overflow-x: ${() => (useIsMobile() ? 'hidden' : 'auto')};
width: ${() => (useIsMobile() ? `calc(100% - 2px);` : '100%')};
width: 100%;
`;
const StyledInnerContainer = styled.div`
display: flex;
flex-direction: ${() => (useIsMobile() ? 'column' : 'row')};
width: 100%;
`;
const StyledScrollWrapper = styled(ScrollWrapper)`
background-color: ${({ theme }) => theme.background.secondary};
border-radius: ${({ theme }) => theme.border.radius.md};
`;
export type ShowPageContainerProps = {
@ -17,5 +29,16 @@ export type ShowPageContainerProps = {
};
export function ShowPageContainer({ children }: ShowPageContainerProps) {
return <StyledShowPageContainer>{children} </StyledShowPageContainer>;
const isMobile = useIsMobile();
return isMobile ? (
<StyledOuterContainer>
<StyledScrollWrapper>
<StyledInnerContainer>{children}</StyledInnerContainer>
</StyledScrollWrapper>
</StyledOuterContainer>
) : (
<StyledOuterContainer>
<StyledInnerContainer>{children}</StyledInnerContainer>
</StyledOuterContainer>
);
}