b83d8a4b27
# Introduction While working on https://github.com/twentyhq/core-team-issues/issues/355 encountered a recent regression:  I honestly cannot explain this regression, should take time to do some commits dichotomy in order to identify the problematic one but it feels overkill ## Remarks - Modified a common components please while reviewing have a look to other of its invokation too ( others settings page )
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { OBJECT_SETTINGS_WIDTH } from '@/settings/data-model/constants/ObjectSettings';
|
|
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
|
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
|
|
import styled from '@emotion/styled';
|
|
import { ReactNode } from 'react';
|
|
import { isDefined } from 'twenty-shared';
|
|
|
|
const StyledSettingsPageContainer = styled.div<{
|
|
width?: number;
|
|
}>`
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${({ theme }) => theme.spacing(8)};
|
|
overflow: auto;
|
|
padding: ${({ theme }) => theme.spacing(6, 8, 8)};
|
|
width: ${({ width }) => {
|
|
if (isDefined(width)) {
|
|
return width + 'px';
|
|
}
|
|
if (useIsMobile()) {
|
|
return 'unset';
|
|
}
|
|
return OBJECT_SETTINGS_WIDTH + 'px';
|
|
}};
|
|
padding-bottom: ${({ theme }) => theme.spacing(20)};
|
|
`;
|
|
|
|
export const SettingsPageContainer = ({
|
|
children,
|
|
}: {
|
|
children: ReactNode;
|
|
}) => (
|
|
<ScrollWrapper
|
|
contextProviderName="settingsPageContainer"
|
|
heightMode="full"
|
|
componentInstanceId={'scroll-wrapper-settings-page-container'}
|
|
>
|
|
<StyledSettingsPageContainer>{children}</StyledSettingsPageContainer>
|
|
</ScrollWrapper>
|
|
);
|