fix: верстка

src/app/providers/router/router.tsx

@@ -20,7 +20,7 @@ const normalRouter = createBrowserRouter([
 
 const Routing = () => {
   return (
-    <RouterProvider router={import.meta.env.VITE_CLOSED ? closedRouter : normalRouter} />
+    <RouterProvider router={!import.meta.env.VITE_CLOSED ? closedRouter : normalRouter} />
   );
 };
 

src/entities/project/info/ProjectInfo.tsx

@@ -47,7 +47,7 @@ export const ProjectInfo = ({
   return (
     <>
       <Stack gap={0} mb={3} alignItems="start">
-        <Status mb={['3', '4']}>{project.status}</Status>
+        <Status mb={3}>{project.status}</Status>
         <Card
           title={project.name}
           date={project.deadline}

src/entities/user/notification/NotificationItem.tsx

@@ -1,5 +1,6 @@
 import { Stack, Flex, Heading, Text, Circle } from '@chakra-ui/react';
 
+import { useIsMobile } from '~/shared/hooks';
 import { SLink } from '~/shared/ui/SLink';
 
 interface NotificationItemProps {
@@ -9,14 +10,15 @@ interface NotificationItemProps {
 
 export function NotificationItem(props: NotificationItemProps) {
   const { status, project } = props;
+  const isMobile = useIsMobile();
 
   return (
     <Flex
       justifyContent="space-between"
       borderBottom="1px"
       borderColor="gray.200"
       py={3}
-      px={[5, 6]}
+      px={isMobile ? 5 : 6}
       _last={{ border: 'none' }}
     >
       <Flex alignItems="center" justifyContent="space-between" gap={2}>

src/features/chat/create/CreateMessage.tsx

@@ -2,6 +2,7 @@ import { Icon, Flex, IconButton } from '@chakra-ui/react';
 import { useRef, useState } from 'react';
 import { IoSend } from 'react-icons/io5';
 
+import { useIsMobile } from '~/shared/hooks';
 import { STextarea } from '~/shared/ui/STextarea';
 
 interface CreateMessageProps {
@@ -10,10 +11,11 @@ interface CreateMessageProps {
 
 export function CreateMessage({ onSubmit }: CreateMessageProps) {
   const [value, setValue] = useState('');
+  const isMobile = useIsMobile();
   const messageRef = useRef<HTMLDivElement>(null);
 
   return (
-    <Flex px={[0, 0, 6]} py={4} alignItems="center" gap={4} w="full">
+    <Flex px={isMobile ? 0 : 6} py={4} alignItems="center" gap={4} w="full">
       <STextarea
         maxLength={50}
         value={value}

src/features/project/add/AddProject.tsx

@@ -17,11 +17,11 @@ export const AddProject = () => {
       onClick={() => {
         navigate(PATHS.addProject);
       }}
+      h={'initial'}
       gap={2}
-      minW={['8', '8', '10']}
-      h={['8', '8', '10']}
       flexShrink="0"
-      padding={['0', '0', '4']}
+      px={isMobile ? 1 : 4}
+      py={isMobile ? 1 : 2}
       icon={
         <HStack fontWeight="semibold">
           <Text hidden={isMobile}>Создать проект</Text>

src/pages/not-found/NotFoundPage.tsx

@@ -2,43 +2,48 @@ import { Button, Flex, Heading, Icon } from '@chakra-ui/react';
 import { BsArrowRightShort } from 'react-icons/bs';
 import { useNavigate } from 'react-router-dom';
 
+import { useIsMobile } from '~/shared/hooks';
 import { PATHS } from '~/shared/lib/router';
 
 import NotFound from './notFound.svg';
 
 export const NotFoundPage = () => {
   const navigate = useNavigate();
+  const isMobile = useIsMobile();
+
   return (
-    <Flex flexDirection="column" justifyContent="center" alignItems="center" flex="1">
+    <Flex
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      flex="1"
+      mb="4"
+    >
       <Heading
         variant="h1"
         as="h1"
-        fontSize={['6xl', '8xl', '9xl']}
-        mt={{
-          base: '40px',
-          md: '46px',
-        }}
+        fontSize={isMobile ? '6xl' : '9xl'}
+        mt={isMobile ? 16 : 28}
         position="relative"
         _after={{
-          base: {
-            content: `url(${NotFound})`,
-            position: 'absolute',
-            width: '85px',
-            top: '-14',
-            left: '-8',
-          },
-          md: {
-            width: '120px !important',
-            top: '-20 !important',
-            left: '-14 !important',
-          },
+          content: `url(${NotFound})`,
+          position: 'absolute',
+          width: isMobile ? '85px' : '120px',
+          top: isMobile ? '-14' : '-20',
+          left: isMobile ? '-8' : '-14',
         }}
         textAlign="center"
         mb={4}
       >
         404
       </Heading>
-      <Heading as="h2" fontSize={['xl', '2xl', '4xl']} textAlign="center" pb={10}>
+      <Heading
+        as="h2"
+        variant="h2"
+        fontSize={isMobile ? 'xl' : '4xl'}
+        textAlign="center"
+        pb={10}
+      >
         Упс!.. Похоже, такой страницы не существует
       </Heading>
       <Button
@@ -47,8 +52,8 @@ export const NotFoundPage = () => {
           navigate(PATHS.root);
         }}
         maxW="100%"
-        padding={[5, 5, 7]}
-        fontSize={['sm', 'sm', 'md']}
+        padding={isMobile ? 5 : 7}
+        fontSize={isMobile ? 'sm' : 'md'}
         fontWeight="600"
         rightIcon={<Icon as={BsArrowRightShort} fontSize="2xl" />}
       >

src/pages/projects/ui/ProjectBase.tsx

@@ -21,7 +21,7 @@ import {
 } from '~/entities/project';
 import { useGetSkills, useGetSpecs } from '~/entities/storage';
 
-import { useAuth, useLayoutRefs } from '~/shared/hooks';
+import { useAuth, useIsMobile, useLayoutRefs } from '~/shared/hooks';
 import { GoBack } from '~/shared/ui/GoBack';
 
 interface ProjectBase {
@@ -31,6 +31,7 @@ interface ProjectBase {
 export const ProjectBase = ({ projectId }: ProjectBase) => {
   const layout = useLayoutRefs();
   const { userId } = useAuth();
+  const isMobile = useIsMobile();
   const [projectAvatarImg, setProjectAvatarImg] = useState<string>('');
   const [specsIds, setSpecsIds] = useState<string[]>([]);
   const [unvaluedSkillsIds, setUnvaluedSkillsIds] = useState<string[][]>([]);
@@ -127,7 +128,7 @@ export const ProjectBase = ({ projectId }: ProjectBase) => {
             height={32}
             objectFit="cover"
           />
-          <CardBody padding={['5', '6']}>
+          <CardBody padding={isMobile ? 5 : 6}>
             {project && (
               <>
                 <ProjectInfo

src/widgets/messages/Messages.tsx

@@ -23,13 +23,13 @@ export function Messages({ isDesktop }: MessagesProps) {
     <VStack
       pt={4}
       ref={messagesRef}
-      px={[0, 0, 6]}
+      px={isDesktop ? 6 : 0}
       overflowY={isDesktop ? 'auto' : 'initial'}
     >
       <Box>
         <STag tags={['Не прочитано']} />
       </Box>
-      <VStack gap={6} mb={[4]}>
+      <VStack gap={6} mb={4}>
         <VStack alignItems="end">
           <Message variant="outgoing">Здравствуйте</Message>
           <Message variant="outgoing">

src/widgets/profile-card/ProfileCard.desktop.tsx

@@ -11,9 +11,11 @@ import {
 
 import { Info } from '~/entities/user';
 
+import { useIsMobile } from '~/shared/hooks';
 import { STag } from '~/shared/ui/STag';
 
 export function ProfileCardDesktop() {
+  const isMobile = useIsMobile();
   const dummyFillProfile = 60;
   const dymmyMainSkills = ['UX/UI дизайнер', 'Product дизайнер'];
   const dymmySkills = [
@@ -36,7 +38,7 @@ export function ProfileCardDesktop() {
         w="100%"
         borderRadius="2xl"
         mb={10}
-        p={[2, 2, 6, 10]}
+        p={isMobile ? 2 : 10}
         gap={6}
       >
         <Stack gap="2.5">

src/widgets/project-card/ui/ProjectCard.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { Card } from '~/entities/project';
 
+import { useIsMobile } from '~/shared/hooks';
 import { Status } from '~/shared/ui/status';
 
 type ProjectCardProps = {
@@ -14,6 +15,7 @@ type ProjectCardProps = {
 } & CardProps;
 
 export const ProjectCard = (props: ProjectCardProps) => {
+  const isMobile = useIsMobile();
   const { status, title, date, description, children, ...others } = props;
 
   return (
@@ -25,8 +27,8 @@ export const ProjectCard = (props: ProjectCardProps) => {
       alignContent="center"
       {...others}
     >
-      <CardBody padding={['5', '6']}>
-        <Status mb={['3', '4']}>{status}</Status>
+      <CardBody padding={isMobile ? 5 : 6}>
+        <Status mb={isMobile ? 3 : 4}>{status}</Status>
         <Card date={date} description={description} title={title} />
         {children}
       </CardBody>

src/widgets/project/add/tabs/AboutProject.tsx

@@ -14,6 +14,7 @@ import { ChangeEvent, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { BsPlus, BsX } from 'react-icons/bs';
 
+import { useIsMobile } from '~/shared/hooks';
 import { STextarea } from '~/shared/ui/STextarea';
 
 import { AddProjectForm } from '../AddProject.types';
@@ -23,6 +24,7 @@ interface AboutProjectProps {
 }
 
 export const AboutProject = (props: AboutProjectProps) => {
+  const isMobile = useIsMobile();
   const {
     register,
     control,
@@ -57,7 +59,7 @@ export const AboutProject = (props: AboutProjectProps) => {
               flexShrink="0"
               h={0}
               minW="none"
-              padding={['0', '0', '4']}
+              padding={isMobile ? 0 : 4}
               icon={
                 <>
                   <Icon as={BsX} fontSize="2xl" />
@@ -73,7 +75,7 @@ export const AboutProject = (props: AboutProjectProps) => {
               flexShrink="0"
               h={0}
               minW="none"
-              padding={['0', '0', '4']}
+              padding={isMobile ? 0 : 4}
               icon={
                 <>
                   <Icon as={BsPlus} fontSize="2xl" />