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

Minor page header fix (#7927)

Browse Source 
<img width="1420" alt="Screenshot 2024-10-22 at 00 03 03"
src="https://github.com/user-attachments/assets/c8841991-9c0a-41fd-8fc5-f789c4a94398">

<img width="1512" alt="Screenshot 2024-10-22 at 00 04 33"
src="https://github.com/user-attachments/assets/a9bbbad9-5cc3-4019-8928-d25d02d0bda9">
This commit is contained in:
nitin
2024-10-22 00:18:12 +05:30
committed by GitHub
parent 0f0a7966b1
commit 4407b1aaa2
1 changed files with 2 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
View File

@ -19,7 +19,7 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
export const PAGE_BAR_MIN_HEIGHT = 40; export const PAGE_BAR_MIN_HEIGHT = 40;
const StyledTopBarContainer = styled.div<{ width?: number }>` const StyledTopBarContainer = styled.div`
align-items: center; align-items: center;
background: ${({ theme }) => theme.background.noisy}; background: ${({ theme }) => theme.background.noisy};
color: ${({ theme }) => theme.font.color.primary}; color: ${({ theme }) => theme.font.color.primary};
@ -31,7 +31,6 @@ const StyledTopBarContainer = styled.div<{ width?: number }>`
padding: ${({ theme }) => theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(2)};
padding-left: 0; padding-left: 0;
padding-right: ${({ theme }) => theme.spacing(3)}; padding-right: ${({ theme }) => theme.spacing(3)};
width: ${({ width }) => (width ? `${width}px` : '100%')};
@media (max-width: ${MOBILE_VIEWPORT}px) { @media (max-width: ${MOBILE_VIEWPORT}px) {
width: 100%; width: 100%;
@ -91,7 +90,6 @@ type PageHeaderProps = {
navigateToNextRecord?: () => void; navigateToNextRecord?: () => void;
Icon?: IconComponent; Icon?: IconComponent;
children?: ReactNode; children?: ReactNode;
width?: number;
}; };
export const PageHeader = ({ export const PageHeader = ({
@ -105,7 +103,6 @@ export const PageHeader = ({
navigateToNextRecord, navigateToNextRecord,
Icon, Icon,
children, children,
width,
}: PageHeaderProps) => { }: PageHeaderProps) => {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const theme = useTheme(); const theme = useTheme();
@ -114,7 +111,7 @@ export const PageHeader = ({
); );
return ( return (
<StyledTopBarContainer width={width}> <StyledTopBarContainer>
<StyledLeftContainer> <StyledLeftContainer>
{!isMobile && !isNavigationDrawerExpanded && ( {!isMobile && !isNavigationDrawerExpanded && (
<StyledTopBarButtonContainer> <StyledTopBarButtonContainer>