Repository: ClevertecFrontendLab/DePacos
Pull request #1: Sprint 1
Author: login: DePacos
Created: 2025-04-12T19:46:49Z | Merged: 2025-04-14T05:11:33Z



Diff:
diff --git a/src/data/mockRecipes.tsx b/src/data/mockRecipes.tsx
index e774259..797c05b 100644
--- a/src/data/mockRecipes.tsx
+++ b/src/data/mockRecipes.tsx
@@ -301,4 +301,14 @@ export const mockRecipeSlider = [
         bookmarks: null,
         icon: <Salads width={16} />,
     },
+    {
+        title: 'Оладьи на кефире "Пышные"',
+        description:
+            'Очень вкусные и нежные оладьи на кефире. Настоятельно рекомендую пышные кефирные оладьи на завтрак.',
+        category: 'Десерты, выпечка',
+        image: oladi,
+        likes: 1,
+        bookmarks: null,
+        icon: <Desserts width={16} />,
+    },
 ];
diff --git a/src/shared/Post-section/ui/PostSection.styles.ts b/src/shared/Post-section/ui/PostSection.styles.ts
index f033af3..d45ebcb 100644
--- a/src/shared/Post-section/ui/PostSection.styles.ts
+++ b/src/shared/Post-section/ui/PostSection.styles.ts
@@ -2,7 +2,7 @@ export const styles = {
     wrapper: {
         backgroundColor: 'lime.300',
         padding: { base: '12px 12px 64px 12px', xl: '24px' },
-        margin: { base: '0 0 120px 0', md: '0 0 40px 0', lg: '0 0 64px 0' },
+        margin: { base: '0 0 42px 0', md: '0 0 40px 0', lg: '0 0 40px 0' },
         borderRadius: '16px',
         position: 'relative',
     },
diff --git a/src/shared/Post/ui/Post.styles.ts b/src/shared/Post/ui/Post.styles.ts
index 4ceb3b1..dbe0768 100644
--- a/src/shared/Post/ui/Post.styles.ts
+++ b/src/shared/Post/ui/Post.styles.ts
@@ -1,6 +1,6 @@
 export const styles = {
     wrapper: {
-        padding: { base: '16px', lg: '24px 24px 20px 24px' },
+        padding: { base: '16px', '2xl': '24px 24px 20px 24px' },
         borderRadius: '8px',
         backgroundColor: 'white.900',
         maxWidth: '427px',
@@ -22,6 +22,7 @@ export const styles = {
         lineHeight: '28px',
         fontWeight: '500',
         noOfLines: 1,
+        wordBreak: 'break-all',
     },
 
     subtitle: {
@@ -30,6 +31,7 @@ export const styles = {
     },
 
     description: {
-        noOfLines: { base: 3, md: 0 },
+        noOfLines: 3,
+        maxWidth: { base: '262px', md: '355px' }
     },
 };
diff --git a/src/shared/Recipe/ui/Recipe.styles.ts b/src/shared/Recipe/ui/Recipe.styles.ts
index 6486f93..3f08f85 100644
--- a/src/shared/Recipe/ui/Recipe.styles.ts
+++ b/src/shared/Recipe/ui/Recipe.styles.ts
@@ -45,12 +45,12 @@ export const getStyles = (variant: 'slider' | 'card' | 'description') => ({
         ...((variant === 'slider' || variant === 'description') && {
             flexDirection: 'column-reverse',
             justifyContent: 'start',
-            padding: { base: '8px', lg: '8px', xl: '12px', '2xl': '16px 24px 20px 24px' },
+            padding: { base: '9px', lg: '8px', xl: '12px', '2xl': '16px 24px 20px 24px' },
         }),
         ...(variant === 'card' && {
             maxWidth: '100%',
             flexDirection: 'column',
-            padding: { base: '8px', lg: '8px', xl: '16px 24px 20px 24px' },
+            padding: { base: '8px 8px 8px 16px', lg: '8px', xl: '16px 24px 20px 24px' },
         }),
         ...(variant === 'description' && {
             width: '100%',
@@ -124,6 +124,10 @@ export const getStyles = (variant: 'slider' | 'card' | 'description') => ({
         lineHeight: '20px',
         noOfLines: '3',
         ...(variant !== 'card' && { marginBottom: '24px' }),
+        ...(variant === 'description' && {
+            maxWidth: { base: '100%', md: '196px', xl: '234px', '2xl': '278px' },
+        }),
+        ...(variant === 'slider' && { maxWidth: { base: '290px', xl: '235px', '2xl': '263px' } }),
     },
 
     saveButton: {
diff --git a/src/shared/Section/ui/Section.styles.ts b/src/shared/Section/ui/Section.styles.ts
index c2493fc..c6a675e 100644
--- a/src/shared/Section/ui/Section.styles.ts
+++ b/src/shared/Section/ui/Section.styles.ts
@@ -47,8 +47,9 @@ export const getStyles = ({
             lineHeight: { base: '32px', xl: '40px', '2xl': '48px' },
         }),
         ...(display === 'flex' && {
-            flex: { base: 'inherit', '2xl': '0 0 50%' },
-            padding: { base: '0', xl: '0 14% 0 0', '2xl': '0' },
+            flex: { base: 'inherit', '2xl': '0 0 49.5%' },
+            margin: { base: '0', xl: '0 2% 0 0', '2xl': '0' },
+            maxWidth: { base: '298px', xl: '260px', '2xl': '100%' },
         }),
     },
 
@@ -59,6 +60,8 @@ export const getStyles = ({
         opacity: '0.64',
         ...(textAlign === 'left' && {
             marginBottom: 0,
+            maxWidth: { base: '100%', xl: '525px', '2xl': '630px' },
+            letterSpacing: '0.3px',
         }),
         ...(textAlign === 'center' && {
             maxWidth: { base: '727px', xl: '696px' },
diff --git a/src/shared/Section/ui/Section.tsx b/src/shared/Section/ui/Section.tsx
index d571697..1ef0097 100644
--- a/src/shared/Section/ui/Section.tsx
+++ b/src/shared/Section/ui/Section.tsx
@@ -1,5 +1,3 @@
-// shared/ui/section/ui/Section.tsx
-
 import { Box, Heading, ResponsiveValue, Text } from '@chakra-ui/react';
 import { ReactNode } from 'react';
 
@@ -29,16 +27,28 @@ export const Section = ({
     const styles = getStyles({ heading, textAlign, display, description });
 
     return (
-        <Box as='section' sx={styles.wrapper(bgColor, margin)}>
-            <Box sx={styles.inner}>
-                <Heading as={heading} sx={styles.heading}>
-                    {title}
-                </Heading>
+        <>
+            <Box
+                as='section'
+                sx={{
+                    ...styles.wrapper(bgColor, margin),
+                    ...(display === 'flex' && {
+                        padding: { base: '8px 0 0 0', xl: '24px 0 0 0' },
+                        borderTop: '1px solid',
+                        borderColor: 'black.200',
+                    }),
+                }}
+            >
+                <Box sx={styles.inner}>
+                    <Heading as={heading} sx={styles.heading}>
+                        {title}
+                    </Heading>
 
-                {description && <Text sx={styles.description}>{description}</Text>}
-            </Box>
+                    {description && <Text sx={styles.description}>{description}</Text>}
+                </Box>
 
-            <Box sx={styles.children}>{children}</Box>
-        </Box>
+                <Box sx={styles.children}>{children}</Box>
+            </Box>
+        </>
     );
 };
diff --git a/src/shared/Slider/Slider.tsx b/src/shared/Slider/Slider.tsx
index 762a80b..1f51f6e 100644
--- a/src/shared/Slider/Slider.tsx
+++ b/src/shared/Slider/Slider.tsx
@@ -20,18 +20,19 @@ const styles = {
         borderRadius: '6px',
     },
     sliderTrack: {
-        gap: 6,
-        justifyContent: {
-            base: 'flex-start',
-            sm: 'space-between',
-        },
+        gap: { base: '12px', '2xl': '24px' },
+        // justifyContent: {
+        //     base: 'flex-start',
+        //     sm: 'space-between',
+        // },
+        width: { base: '143%', md: '130%', xl: '130%', '2xl': '100%' },
     },
     slideBox: {
-        // maxWidth: {
-        //   base: "156px",
-        //   xl: "277px",
-        //   "2xl": "322px",
-        // },
+        maxWidth: {
+            base: '158px',
+            xl: '100%',
+            // "2xl": "322px",
+        },
         flexBasis: { base: '50%', md: '32%' },
     },
 };
@@ -39,11 +40,11 @@ const styles = {
 export const Slider = () => {
     const visibleSlides =
         useBreakpointValue({
-            base: 2,
+            base: 3,
             '2sm': 3,
-            md: 4,
+            md: 5,
             lg: 4,
-            xl: 3,
+            xl: 4,
             '2xl': 4,
         }) ?? 1;
 
@@ -72,14 +73,15 @@ export const Slider = () => {
                     />
                 </>
             )}
-
-            <Flex sx={styles.sliderTrack}>
-                {mockRecipeSlider.slice(0, visibleSlides).map((product, index) => (
-                    <Box key={index} sx={styles.slideBox}>
-                        <Recipe {...product} variant='slider' />
-                    </Box>
-                ))}
-            </Flex>
+            <Box sx={{ overflow: 'hidden' }}>
+                <Flex sx={styles.sliderTrack}>
+                    {mockRecipeSlider.slice(0, visibleSlides).map((product, index) => (
+                        <Box key={index} sx={styles.slideBox}>
+                            <Recipe {...product} variant='slider' />
+                        </Box>
+                    ))}
+                </Flex>
+            </Box>
         </Box>
     );
 };
diff --git a/src/shared/Tabs-recipe/ui/TabsRecipe.styles.ts b/src/shared/Tabs-recipe/ui/TabsRecipe.styles.ts
index 4766ab2..c09c825 100644
--- a/src/shared/Tabs-recipe/ui/TabsRecipe.styles.ts
+++ b/src/shared/Tabs-recipe/ui/TabsRecipe.styles.ts
@@ -24,7 +24,14 @@ export const styles = {
     },
 
     tabsWrap: {
+        display: 'flex',
+        justifyContent: { base: 'start', md: 'center' },
         overflowX: 'auto',
+        msOverflowStyle: 'none',
+        scrollbarWidth: 'none',
+        '&::-webkit-scrollbar': {
+            display: 'none',
+        },
     },
 
     container: {
diff --git a/src/shared/Tabs-recipe/ui/TabsRecipe.tsx b/src/shared/Tabs-recipe/ui/TabsRecipe.tsx
index a5f07b7..8c57d1c 100644
--- a/src/shared/Tabs-recipe/ui/TabsRecipe.tsx
+++ b/src/shared/Tabs-recipe/ui/TabsRecipe.tsx
@@ -1,4 +1,6 @@
-import { Box, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
+import { Box, Tab, TabList, TabPanel, TabPanels, Tabs, useBreakpointValue } from '@chakra-ui/react';
+import { useEffect, useRef, useState } from 'react';
+
 
 import { mockRecipe } from '~/data/mockRecipes';
 import { RecipesList } from '~/shared/Recipes-list/ui/RecipesList';
@@ -25,25 +27,55 @@ const tabItems = [
     { label: 'Напитки', content: <p>Напитки</p> },
 ];
 
-export const TabsRecipe = () => (
-    <Tabs sx={styles.container} defaultIndex={2}>
-        <Box className='test' sx={styles.tabsWrap}>
-            <TabList sx={styles.tabList}>
-                {tabItems.map((item, i) => (
-                    <Tab key={i} sx={styles.tab}>
-                        {item.label}
-                    </Tab>
+export const TabsRecipe = () => {
+    const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
+    const isMobile = useBreakpointValue({ base: true, md: false, lg: true }) ?? false;
+
+    const correctedIndex = isMobile ? 1 : 2;
+
+    const [activeIndex, setActiveIndex] = useState(correctedIndex);
+    const filteredTabs = isMobile ? tabItems.slice(1) : tabItems;
+
+    useEffect(() => {
+        setActiveIndex(correctedIndex);
+    }, [isMobile]);
+
+    useEffect(() => {
+        const activeTab = tabRefs.current[activeIndex];
+        if (activeTab) {
+            activeTab.scrollIntoView({
+                behavior: 'smooth',
+                inline: 'center',
+                block: 'nearest',
+            });
+        }
+    }, [activeIndex]);
+
+    return (
+        <Tabs index={activeIndex} onChange={(index) => setActiveIndex(index)} sx={styles.container}>
+            <Box sx={styles.tabsWrap}>
+                <TabList sx={styles.tabList}>
+                    {filteredTabs.map((item, i) => (
+                        <Tab
+                            key={i}
+                            ref={(el) => {
+                                tabRefs.current[i] = el;
+                            }}
+                            sx={styles.tab}
+                        >
+                            {item.label}
+                        </Tab>
+                    ))}
+                </TabList>
+            </Box>
+
+            <TabPanels>
+                {filteredTabs.map((item, i) => (
+                    <TabPanel key={i} sx={styles.tabPanel}>
+                        {item.content}
+                    </TabPanel>
                 ))}
-            </TabList>
-        </Box>
-
-        <TabPanels>
-            {tabItems.map((item, i) => (
-                // <TabPanel key={i} sx={styles.tabPanel}>
-                <TabPanel key={i} sx={styles.tabPanel}>
-                    {item.content}
-                </TabPanel>
-            ))}
-        </TabPanels>
-    </Tabs>
-);
+            </TabPanels>
+        </Tabs>
+    );
+};
diff --git a/src/widgets/Left-sidebar/Nav/ui/Nav.tsx b/src/widgets/Left-sidebar/Nav/ui/Nav.tsx
index cb1f575..656f085 100644
--- a/src/widgets/Left-sidebar/Nav/ui/Nav.tsx
+++ b/src/widgets/Left-sidebar/Nav/ui/Nav.tsx
@@ -26,7 +26,25 @@ export const Nav = () => {
     };
 
     return (
-        <Box as='nav' aria-label='Меню' sx={styles.navWrap}>
+        <Box
+            as='nav'
+            aria-label='Меню'
+            sx={styles.navWrap}
+            css={{
+                '&::-webkit-scrollbar': {
+                    background: 'rgba(0, 0, 0, 0.04)',
+                    width: '8px',
+                    height: '8px',
+                },
+                '&::-webkit-scrollbar-thumb': {
+                    background: 'rgba(0, 0, 0, 0.16)',
+                    borderRadius: '8px',
+                    width: '8px',
+                    height: '8px',
+                    border: '4px solid transparent',
+                },
+            }}
+        >
             <Accordion allowMultiple>
                 <NavItem onClick={handleNavItem} icon={<Salads />} label='Салаты'>
                     <NavLinkItem href='#'>subMenu</NavLinkItem>
@@ -51,7 +69,7 @@ export const Nav = () => {
                     data-test-id='vegan-cuisine'
                     icon={<Vegan />}
                     label='Веганская кухня'
-                >
+                    url='/vegan/second-courses'>
                     <NavLinkItem href='#'>Закуски</NavLinkItem>
                     <NavLinkItem href='#'>Первые блюда</NavLinkItem>
                     <NavLinkItem href='/vegan/second-courses'>Вторые блюда</NavLinkItem>
diff --git a/src/widgets/Left-sidebar/Nav/ui/NavItem.tsx b/src/widgets/Left-sidebar/Nav/ui/NavItem.tsx
index 0c8ebb0..a0cceeb 100644
--- a/src/widgets/Left-sidebar/Nav/ui/NavItem.tsx
+++ b/src/widgets/Left-sidebar/Nav/ui/NavItem.tsx
@@ -1,5 +1,6 @@
 import { AccordionButton, AccordionItem, AccordionPanel, Text, VStack } from '@chakra-ui/react';
 import { ReactElement, ReactNode } from 'react';
+import { useLocation } from 'react-router';
 
 import { AccordionArrow } from '~/assets/icons/AccordionArrow';
 
@@ -9,26 +10,39 @@ type NavItemProps = {
     icon: ReactElement;
     label: string;
     children: ReactNode;
+    url?: string | undefined;
 } & React.ComponentProps<typeof AccordionButton>;
 
-export const NavItem = ({ icon, label, children, ...props }: NavItemProps) => (
-    <AccordionItem border='none'>
-        {({ isExpanded }) => {
-            const styles = getStyles(isExpanded);
+export const NavItem = ({ icon, label, children, url, ...props }: NavItemProps) => {
+    const { pathname } = useLocation();
+    const isCurrentUrl = pathname === url;
 
-            return (
-                <>
-                    <AccordionButton {...props} sx={styles.button}>
-                        {icon}
-                        <Text sx={styles.label}>{label}</Text>
-                        <AccordionArrow isExpanded={isExpanded} />
-                    </AccordionButton>
+    return (
+        <AccordionItem border='none'>
+            {({ isExpanded }) => {
+                const styles = getStyles(isExpanded);
 
-                    <AccordionPanel sx={styles.panel}>
-                        <VStack sx={styles.stack}>{children}</VStack>
-                    </AccordionPanel>
-                </>
-            );
-        }}
-    </AccordionItem>
-);
+                return (
+                    <>
+                        <AccordionButton
+                            {...props}
+                            sx={{
+                                ...styles.button,
+                                backgroundColor:
+                                    isExpanded || isCurrentUrl ? 'lime.100' : 'transparent',
+                            }}
+                        >
+                            {icon}
+                            <Text sx={styles.label}>{label}</Text>
+                            <AccordionArrow isExpanded={isExpanded} />
+                        </AccordionButton>
+
+                        <AccordionPanel sx={styles.panel}>
+                            <VStack sx={styles.stack}>{children}</VStack>
+                        </AccordionPanel>
+                    </>
+                );
+            }}
+        </AccordionItem>
+    );
+};
\ No newline at end of file
diff --git a/src/widgets/Left-sidebar/Nav/ui/styles/NavItem.styles.ts b/src/widgets/Left-sidebar/Nav/ui/styles/NavItem.styles.ts
index 834e7f1..9d33f1a 100644
--- a/src/widgets/Left-sidebar/Nav/ui/styles/NavItem.styles.ts
+++ b/src/widgets/Left-sidebar/Nav/ui/styles/NavItem.styles.ts
@@ -1,7 +1,7 @@
 export const getStyles = (isExpanded: boolean) => ({
     button: {
         padding: '12px 8px',
-        backgroundColor: isExpanded ? 'lime.100' : 'transparent',
+        // backgroundColor: isExpanded ? 'lime.100' : 'transparent',
         cursor: 'pointer',
         border: 'none',
         display: 'flex',
diff --git a/src/widgets/Left-sidebar/ui/LeftSidebar.styles.ts b/src/widgets/Left-sidebar/ui/LeftSidebar.styles.ts
index 40c0e2d..192a252 100644
--- a/src/widgets/Left-sidebar/ui/LeftSidebar.styles.ts
+++ b/src/widgets/Left-sidebar/ui/LeftSidebar.styles.ts
@@ -15,8 +15,7 @@ export const styles = {
         display: 'flex',
         flexDirection: 'column',
         gap: '16px',
-        px: '24px',
-        pb: '32px',
+        padding: '16px 24px',
     },
 
     versionText: {
@@ -39,7 +38,6 @@ export const styles = {
         fontSize: '12px',
         lineHeight: '16px',
         fontWeight: '600',
-        leftIcon: undefined,
         width: 'max-content',
         _hover: {
             textDecoration: 'none',
diff --git a/src/widgets/Left-sidebar/ui/LeftSidebar.tsx b/src/widgets/Left-sidebar/ui/LeftSidebar.tsx
index d7a00da..034b95e 100644
--- a/src/widgets/Left-sidebar/ui/LeftSidebar.tsx
+++ b/src/widgets/Left-sidebar/ui/LeftSidebar.tsx
@@ -17,7 +17,7 @@ export const LeftSidebar = () => (
                 <br />
                 ©Клевер Технолоджи, 2025
             </Text>
-            <Button leftIcon={<Logout />} sx={{ ...styles.logoutButton }}>
+            <Button variant='link' leftIcon={<Logout />} sx={{ ...styles.logoutButton }}>
                 Выйти
             </Button>
         </Box>


Reviews:
user: login: SergikEnergy
state: CHANGES_REQUESTED
author_association: NONE
submitted_at: 2025-04-12T21:11:53Z
user: login: byshlata1
body: ![image](https://github.com/user-attachments/assets/f1165918-faa8-4e46-9e46-2a38cac35b32)

state: CHANGES_REQUESTED
author_association: NONE
submitted_at: 2025-04-13T06:12:43Z
user: login: byshlata1
body: ![image](https://github.com/user-attachments/assets/76d0fb87-cf03-4ea7-ab06-a952c4d50ef5)

state: CHANGES_REQUESTED
author_association: NONE
submitted_at: 2025-04-13T06:15:55Z
user: login: byshlata
body: cмотри комментарии
state: CHANGES_REQUESTED
author_association: NONE
submitted_at: 2025-04-13T10:02:22Z
user: login: SergikEnergy
state: CHANGES_REQUESTED
author_association: NONE
submitted_at: 2025-04-13T15:35:48Z
user: login: DePacos
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-13T15:39:34Z
user: login: SergikEnergy
state: APPROVED
author_association: NONE
submitted_at: 2025-04-13T16:04:44Z
user: login: byshlata
state: APPROVED
author_association: NONE
submitted_at: 2025-04-13T20:27:28Z

Review comments:
diff_hunk: @@ -0,0 +1,51 @@
+export const styles = {
path: src/app/App.styles.ts
user: login: SergikEnergy
body: 
![image](https://github.com/user-attachments/assets/92301fa9-517a-41d7-a3f4-7edb9e510780)
Скролл, отступ между навигацией и текстом
created_at: 2025-04-12T20:50:28Z
author_association: NONE
diff_hunk: @@ -0,0 +1,51 @@
+export const styles = {
+    wrapper: {
path: src/app/App.styles.ts
user: login: SergikEnergy
body: ![image](https://github.com/user-attachments/assets/b26a4192-e77e-4657-b2fb-65a4e2736b41)
![image](https://github.com/user-attachments/assets/84641a52-cdd9-4c03-85c2-8ee6a700010c)

текст не по макету внутри кулинарных блогов и в описании 


created_at: 2025-04-12T20:53:04Z
author_association: NONE
diff_hunk: @@ -0,0 +1,51 @@
+export const styles = {
+    wrapper: {
+        position: 'relative',
path: src/app/App.styles.ts
user: login: SergikEnergy
body: ![image](https://github.com/user-attachments/assets/710e92e2-0595-4edc-9998-822207bd2a14)
Слайдер на мобилке - есть кусочек третьей картинки на макете - намек юзеру, что это слайдер
добавить нужно

created_at: 2025-04-12T20:56:32Z
author_association: NONE
diff_hunk: @@ -0,0 +1,51 @@
+export const styles = {
+    wrapper: {
+        position: 'relative',
+        maxWidth: '1920px',
path: src/app/App.styles.ts
user: login: SergikEnergy
body: ![image](https://github.com/user-attachments/assets/cc5dda24-6a47-49ee-a2e6-52acb776ff5b)
текст не по макету (Екатерина...) - сверьте на мобилке
created_at: 2025-04-12T20:57:41Z
author_association: NONE
diff_hunk: @@ -0,0 +1,51 @@
+export const styles = {
+    wrapper: {
+        position: 'relative',
+        maxWidth: '1920px',
+        margin: '0 auto',
+        // templateAreas: {
path: src/app/App.styles.ts
user: login: SergikEnergy
body: ![image](https://github.com/user-attachments/assets/9f848550-61e2-461f-8b16-9c9a8b0e0bbc)
нет заголовка
created_at: 2025-04-12T20:58:28Z
author_association: NONE
diff_hunk: @@ -0,0 +1,51 @@
+export const styles = {
+    wrapper: {
+        position: 'relative',
+        maxWidth: '1920px',
+        margin: '0 auto',
+        // templateAreas: {
+        //   base: `'header' 'main' 'footer'`,
+        //   '2lg': `'header header header' 'nav main info'`,
path: src/app/App.styles.ts
user: login: SergikEnergy
body: ![image](https://github.com/user-attachments/assets/3826adbe-65c1-4e1a-88fc-7791036f6d58)
количество картинок слайдера на десктопе - не по макету
created_at: 2025-04-12T20:59:41Z
author_association: NONE
diff_hunk: @@ -0,0 +1,51 @@
+export const styles = {
+    wrapper: {
+        position: 'relative',
+        maxWidth: '1920px',
+        margin: '0 auto',
+        // templateAreas: {
+        //   base: `'header' 'main' 'footer'`,
+        //   '2lg': `'header header header' 'nav main info'`,
+        // },
+        //
path: src/app/App.styles.ts
user: login: SergikEnergy
body: ![image](https://github.com/user-attachments/assets/46708e5e-df90-45dc-ace4-b36d4e8319e1)

размеры карточек - текста в описании д.б. на 3, а не 4 строки - должен быть обрезан с многоточием - обратить внимание на Екатерина Конста... - так по дизайну
created_at: 2025-04-12T21:01:10Z
author_association: NONE
diff_hunk: @@ -0,0 +1,51 @@
+export const styles = {
+    wrapper: {
+        position: 'relative',
+        maxWidth: '1920px',
+        margin: '0 auto',
+        // templateAreas: {
+        //   base: `'header' 'main' 'footer'`,
+        //   '2lg': `'header header header' 'nav main info'`,
+        // },
+        //
+        // gridTemplateRows: {
path: src/app/App.styles.ts
user: login: SergikEnergy
body: ![image](https://github.com/user-attachments/assets/2309b09b-62e9-4ff6-901a-c21cc26b9e53)
таб Веганская выбран - соответственно в боковом меню категория Веганская должна выделяться стилем - даже в свернутом состоянии
created_at: 2025-04-12T21:03:53Z
author_association: NONE
diff_hunk: @@ -0,0 +1,51 @@
+export const styles = {
+    wrapper: {
+        position: 'relative',
+        maxWidth: '1920px',
+        margin: '0 auto',
+        // templateAreas: {
+        //   base: `'header' 'main' 'footer'`,
+        //   '2lg': `'header header header' 'nav main info'`,
+        // },
+        //
+        // gridTemplateRows: {
+        //   base: '80px 1fr 84px',
path: src/app/App.styles.ts
user: login: SergikEnergy
body: ![image](https://github.com/user-attachments/assets/b2d9d4d8-6bb5-4382-9253-070e541a4a77)
убрать горизонтальный скролл из экрана
если таб активен - он полностью становится видимым - в центр экрана - или по краю для крайних табов
created_at: 2025-04-12T21:05:01Z
author_association: NONE
diff_hunk: @@ -0,0 +1,51 @@
+export const styles = {
+    wrapper: {
+        position: 'relative',
+        maxWidth: '1920px',
+        margin: '0 auto',
+        // templateAreas: {
+        //   base: `'header' 'main' 'footer'`,
+        //   '2lg': `'header header header' 'nav main info'`,
+        // },
+        //
+        // gridTemplateRows: {
+        //   base: '80px 1fr 84px',
+        //   lg: '80px 1fr',
path: src/app/App.styles.ts
user: login: SergikEnergy
body: ![image](https://github.com/user-attachments/assets/58a724af-043d-45b0-9fcc-7ca4e8e24c22)
отступ между картинкой и описанием не по макету
created_at: 2025-04-12T21:06:41Z
author_association: NONE
diff_hunk: @@ -0,0 +1,51 @@
+export const styles = {
+    wrapper: {
+        position: 'relative',
+        maxWidth: '1920px',
+        margin: '0 auto',
+        // templateAreas: {
+        //   base: `'header' 'main' 'footer'`,
+        //   '2lg': `'header header header' 'nav main info'`,
+        // },
+        //
+        // gridTemplateRows: {
+        //   base: '80px 1fr 84px',
+        //   lg: '80px 1fr',
+        // },
path: src/app/App.styles.ts
user: login: SergikEnergy
body: ![image](https://github.com/user-attachments/assets/c155824d-f85d-4a93-8b7c-58fef26e8d7f)
в дизайне есть Divider после кнопки Загрузить перед следующем блоком
created_at: 2025-04-12T21:07:59Z
author_association: NONE
diff_hunk: @@ -0,0 +1,51 @@
+export const styles = {
+    wrapper: {
+        position: 'relative',
+        maxWidth: '1920px',
+        margin: '0 auto',
+        // templateAreas: {
+        //   base: `'header' 'main' 'footer'`,
+        //   '2lg': `'header header header' 'nav main info'`,
+        // },
+        //
+        // gridTemplateRows: {
+        //   base: '80px 1fr 84px',
+        //   lg: '80px 1fr',
+        // },
+        //
path: src/app/App.styles.ts
user: login: SergikEnergy
body: таблетка - отступы и скролл
![image](https://github.com/user-attachments/assets/1b63c10e-5657-4cc0-8613-45d06e9ae8f1)

created_at: 2025-04-12T21:09:08Z
author_association: NONE
diff_hunk: @@ -0,0 +1,51 @@
+export const styles = {
+    wrapper: {
+        position: 'relative',
+        maxWidth: '1920px',
+        margin: '0 auto',
+        // templateAreas: {
+        //   base: `'header' 'main' 'footer'`,
+        //   '2lg': `'header header header' 'nav main info'`,
+        // },
+        //
+        // gridTemplateRows: {
+        //   base: '80px 1fr 84px',
+        //   lg: '80px 1fr',
+        // },
+        //
+        // gridTemplateColumns: {
+        //   base: '1fr',
path: src/app/App.styles.ts
user: login: SergikEnergy
body: ![image](https://github.com/user-attachments/assets/6e8a18fb-8fe7-4e0d-aa33-de9e1d9fa8c5)
шрифт не по макету
в описании категории д.б. 3 строки, внутри карточек как будто не тот стиль
created_at: 2025-04-12T21:10:16Z
author_association: NONE
diff_hunk: @@ -301,4 +301,14 @@ export const mockRecipeSlider = [
         bookmarks: null,
path: src/data/mockRecipes.tsx
user: login: SergikEnergy
body: ![image](https://github.com/user-attachments/assets/dc1e919a-659a-48c2-a58d-34311311a780)
отступа нет после Веганская
created_at: 2025-04-13T15:34:01Z
author_association: NONE
diff_hunk: @@ -301,4 +301,14 @@ export const mockRecipeSlider = [
         bookmarks: null,
path: src/data/mockRecipes.tsx
user: login: DePacos
body: если возможность есть запустите пжл локально, там есть отступ, позможно тест не корректно срабатвает 
![Главная страница_360x1080](https://github.com/user-attachments/assets/06bcb227-214d-493b-9ec6-0da8a93e1e74)

created_at: 2025-04-13T15:39:34Z
author_association: COLLABORATOR

PR comments:
user: login: Ivan6813
created_at: 2025-04-12T19:48:32Z
body: # Результаты тестов
Процент пройденных тестов: 100%.
Общее количество тестов: 1.
Количество непройденных тестов: 0.
***
**Главная страница_1920x750 (1).jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744487311/Главная%20страница_1920x750%20(1).jpg)
***
**Главная страница_1920x750.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744487311/Главная%20страница_1920x750.jpg)
***
**Главная страница_360x1080.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744487311/Главная%20страница_360x1080.jpg)
***
**Главная страница_768x1080.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744487311/Главная%20страница_768x1080.jpg)
***
**Страница Веганская кухня_1920x750 (1).jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744487311/Страница%20Веганская%20кухня_1920x750%20(1).jpg)
***
**Страница Веганская кухня_1920x750.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744487311/Страница%20Веганская%20кухня_1920x750.jpg)
***
**Страница Веганская кухня_360x1080.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744487311/Страница%20Веганская%20кухня_360x1080.jpg)
***
**Страница Веганская кухня_768x1080.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744487311/Страница%20Веганская%20кухня_768x1080.jpg)
***
**Страница Самое сочное_1920x750 (1).jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744487311/Страница%20Самое%20сочное_1920x750%20(1).jpg)
***
**Страница Самое сочное_1920x750.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744487311/Страница%20Самое%20сочное_1920x750.jpg)
***
**Страница Самое сочное_360x1080.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744487311/Страница%20Самое%20сочное_360x1080.jpg)
***
**Страница Самое сочное_768x1080.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744487311/Страница%20Самое%20сочное_768x1080.jpg)

author_association: NONE
user: login: DePacos
created_at: 2025-04-13T08:37:03Z
body: Можно уточнить как должны быть реализованы табы, судя по макету, табы не должнен менять свой размер, а при уменьшении расшерении экрана должны горизонтально проскроливаться, если ли не так, подскажите как правильно.
author_association: COLLABORATOR
user: login: DePacos
created_at: 2025-04-13T10:07:25Z
body: в комментарии написано что что-то вылазит из контейнера и появляется скрол, это скрол от табов, по этому уточнаю как нужно реализовать табы? или нужно скрыть скрол? 
author_association: COLLABORATOR
user: login: Ivan6813
created_at: 2025-04-13T15:29:23Z
body: # Результаты тестов
Процент пройденных тестов: 100%.
Общее количество тестов: 1.
Количество непройденных тестов: 0.
***
**Главная страница_1920x750 (1).jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744558163/Главная%20страница_1920x750%20(1).jpg)
***
**Главная страница_1920x750.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744558163/Главная%20страница_1920x750.jpg)
***
**Главная страница_360x1080.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744558163/Главная%20страница_360x1080.jpg)
***
**Главная страница_768x1080.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744558163/Главная%20страница_768x1080.jpg)
***
**Страница Веганская кухня_1920x750 (1).jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744558163/Страница%20Веганская%20кухня_1920x750%20(1).jpg)
***
**Страница Веганская кухня_1920x750.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744558163/Страница%20Веганская%20кухня_1920x750.jpg)
***
**Страница Веганская кухня_360x1080.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744558163/Страница%20Веганская%20кухня_360x1080.jpg)
***
**Страница Веганская кухня_768x1080.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744558163/Страница%20Веганская%20кухня_768x1080.jpg)
***
**Страница Самое сочное_1920x750 (1).jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744558163/Страница%20Самое%20сочное_1920x750%20(1).jpg)
***
**Страница Самое сочное_1920x750.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744558163/Страница%20Самое%20сочное_1920x750.jpg)
***
**Страница Самое сочное_360x1080.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744558163/Страница%20Самое%20сочное_360x1080.jpg)
***
**Страница Самое сочное_768x1080.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744558163/Страница%20Самое%20сочное_768x1080.jpg)

author_association: NONE
user: login: Ivan6813
created_at: 2025-04-13T15:56:34Z
body: # Результаты тестов
Процент пройденных тестов: 100%.
Общее количество тестов: 1.
Количество непройденных тестов: 0.
***
**Главная страница_1920x750 (1).jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744559794/Главная%20страница_1920x750%20(1).jpg)
***
**Главная страница_1920x750.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744559794/Главная%20страница_1920x750.jpg)
***
**Главная страница_360x1080.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744559794/Главная%20страница_360x1080.jpg)
***
**Главная страница_768x1080.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744559794/Главная%20страница_768x1080.jpg)
***
**Страница Веганская кухня_1920x750 (1).jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744559794/Страница%20Веганская%20кухня_1920x750%20(1).jpg)
***
**Страница Веганская кухня_1920x750.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744559794/Страница%20Веганская%20кухня_1920x750.jpg)
***
**Страница Веганская кухня_360x1080.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744559794/Страница%20Веганская%20кухня_360x1080.jpg)
***
**Страница Веганская кухня_768x1080.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744559794/Страница%20Веганская%20кухня_768x1080.jpg)
***
**Страница Самое сочное_1920x750 (1).jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744559794/Страница%20Самое%20сочное_1920x750%20(1).jpg)
***
**Страница Самое сочное_1920x750.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744559794/Страница%20Самое%20сочное_1920x750.jpg)
***
**Страница Самое сочное_360x1080.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744559794/Страница%20Самое%20сочное_360x1080.jpg)
***
**Страница Самое сочное_768x1080.jpg**
![Скриншот автотестов](https://static.clevertec.ru/media/sprint1/DePacos/1744559794/Страница%20Самое%20сочное_768x1080.jpg)

author_association: NONE