🎨(frontend) create PageLayout

- Create PageLayout, a simple layout for pages
that don't need a sidebar and don't need to be
contains in the screen height.
- Moves the layouts in the layouts folder.

src/frontend/apps/desk/src/components/Box.tsx

@@ -21,8 +21,10 @@ export interface BoxProps {
   $height?: CSSProperties['height'];
   $justify?: CSSProperties['justifyContent'];
   $overflow?: CSSProperties['overflow'];
-  $maxWidth?: CSSProperties['maxWidth'];
   $margin?: MarginPadding;
+  $maxHeight?: CSSProperties['maxHeight'];
+  $minHeight?: CSSProperties['minHeight'];
+  $maxWidth?: CSSProperties['maxWidth'];
   $minWidth?: CSSProperties['minWidth'];
   $padding?: MarginPadding;
   $position?: CSSProperties['position'];
@@ -52,5 +54,7 @@ export const Box = styled('div')<BoxProps>`
   ${({ $width }) => $width && `width: ${$width};`}
   ${({ $maxWidth }) => $maxWidth && `max-width: ${$maxWidth};`}
   ${({ $minWidth }) => $minWidth && `min-width: ${$minWidth};`}
+  ${({ $maxHeight }) => $maxHeight && `max-height: ${$maxHeight};`}
+  ${({ $minHeight }) => $minHeight && `min-height: ${$minHeight};`}
   ${({ $css }) => $css && `${$css};`}
 `;

src/frontend/apps/desk/src/core/index.ts

@@ -1,2 +1 @@
 export * from './AppProvider';
-export * from './MainLayout';

src/frontend/apps/desk/src/features/mail-domains/components/MailDomainsLayout.tsx

@@ -1,9 +1,9 @@
 import { PropsWithChildren } from 'react';
 
 import { Box } from '@/components';
-import { MainLayout } from '@/core';
 import { useCunninghamTheme } from '@/cunningham';
 import { Panel } from '@/features/mail-domains/components/panel';
+import { MainLayout } from '@/layouts';
 
 export function MailDomainsLayout({ children }: PropsWithChildren) {
   const { colorsTokens } = useCunninghamTheme();

src/frontend/apps/desk/src/features/teams/components/TeamLayout.tsx

@@ -1,9 +1,9 @@
 import { PropsWithChildren } from 'react';
 
 import { Box } from '@/components';
-import { MainLayout } from '@/core';
 import { useCunninghamTheme } from '@/cunningham';
 import { Panel } from '@/features/teams';
+import { MainLayout } from '@/layouts';
 
 export function TeamLayout({ children }: PropsWithChildren) {
   const { colorsTokens } = useCunninghamTheme();

src/frontend/apps/desk/src/layouts/PageLayout.tsx

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+
+import { Box } from '@/components';
+import { Header } from '@/features/header';
+
+export function PageLayout({ children }: PropsWithChildren) {
+  return (
+    <Box $minHeight="100vh">
+      <Header />
+      <Box as="main" $width="100%" $css="flex-grow:1;">
+        {children}
+      </Box>
+    </Box>
+  );
+}

src/frontend/apps/desk/src/layouts/index.ts

@@ -0,0 +1,2 @@
+export * from './MainLayout';
+export * from './PageLayout';

src/frontend/apps/desk/src/pages/404.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 
 import Icon404 from '@/assets/icons/icon-404.svg';
 import { Box, StyledLink, Text } from '@/components';
-import { MainLayout } from '@/core';
+import { MainLayout } from '@/layouts';
 import { NextPageWithLayout } from '@/types/next';
 
 const StyledButton = styled(Button)`