enhancement: improved responsive

Author: ihornovykov

src/app/not-found.tsx

@@ -6,12 +6,6 @@ import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 
 import Button from '@/components/common/ui/button';
-import {
-  ButtonColor,
-  ButtonIcon,
-  ButtonSize,
-  ButtonVariant,
-} from '@/components/common/ui/button/types';
 
 import * as styles from '../components/pages/NotFound.styles';
 

src/components/common/layout/page-layout/footer/Footer.styles.ts

@@ -10,14 +10,10 @@ export const wrapper: SxProps<Theme> = {
     desktop: 'flex-start',
     mobile: 'center',
   },
-  justifyContent: {
-    desktop: 'space-between',
-    mobile: 'center',
-  },
   zIndex: 11,
 
   padding: {
-    mobileMedium: '38px 100px',
+    mobileMedium: '38px 50px',
     mobile: '16px',
   },
   height: 'auto',
@@ -41,7 +37,12 @@ export const text: SxProps<Theme> = {
 };
 
 export const columns: SxProps<Theme> = {
+  width: '100%',
   display: 'flex',
+  justifyContent: {
+    mobileMedium: 'flex-end',
+    mobile: 'space-between',
+  },
   gap: {
     desktop: '80px',
     mobileMedium: '40px',

src/components/common/layout/page-layout/header/Header.styles.ts

@@ -1,7 +1,11 @@
 import { SxProps, Theme } from '@mui/material/styles';
 
 export const wrapper: SxProps<Theme> = {
-  p: '0px 100px',
+  py: 0,
+  px: {
+    mobile: '16px',
+    tablet: '100px',
+  },
   width: '100%',
   height: '64px',
   boxShadow: 'rgba(0, 0, 0, 0.24) 0px 3px 8px',

src/components/pages/NotFound.styles.ts

@@ -1,16 +1,14 @@
 import { SxProps, Theme } from '@mui/material/styles';
 
 export const wrapper: SxProps<Theme> = {
-  height: {
-    desktop: '100%',
-    mobile: '100vh',
-  },
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
-  m: '14px 24px 106px 24px',
-
+  m: {
+    mobile: '106px 24px',
+    tablet: '14px 24px 106px 24px',
+  },
   img: {
     maxWidth: '100%',
     height: 'auto',