fix: исправление для мобильных устройств высоты

src/app/providers/layout/Layout.tsx

@@ -1,12 +1,12 @@
 import { Box, ChakraProvider, Container, Flex, Stack } from '@chakra-ui/react';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { ScrollRestoration, useLocation } from 'react-router-dom';
 
 import { MenuBase, MenuDesktop } from '~/widgets/menu';
 
 import { desktopTheme, mobileTheme } from '~/shared/config';
 import { LayoutContext } from '~/shared/contexts';
-import { useIsMobile } from '~/shared/hooks';
+import { useIsMobile, useWindowSizes } from '~/shared/hooks';
 import { PATHS } from '~/shared/lib/router';
 
 import { AuthProvider } from './AuthProvider';
@@ -15,12 +15,19 @@ import { Routes } from './Routes';
 export const Layout = () => {
   const isMobile = useIsMobile();
   const location = useLocation();
+  const sizes = useWindowSizes();
   const footerRef = useRef<HTMLDivElement>(null);
   const headerRef = useRef<HTMLDivElement>(null);
 
   const isNotFoundPage = location.pathname === PATHS.notFound;
   const isDialogPage = new RegExp(`${PATHS.chats}/\\d+`).test(location.pathname);
 
+  useEffect(() => {
+    if (!isMobile) return;
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
+  }, [isMobile, sizes.height]);
+
   return (
     <>
       <LayoutContext.Provider value={{ header: headerRef, footer: footerRef }}>

src/shared/config/theme/mobileTheme.ts

@@ -2,4 +2,15 @@ import { extendTheme } from '@chakra-ui/react';
 
 import { basicTheme } from './theme';
 
-export const mobileTheme = extendTheme(basicTheme);
+export const mobileTheme = extendTheme(basicTheme, {
+  styles: {
+    global: {
+      html: {
+        minHeight: 'calc(100vh - 56px)',
+        '@supports (--css: variables)': {
+          minHeight: 'calc(var(--vh, 1vh) * 100)',
+        },
+      },
+    },
+  },
+});

src/shared/hooks/index.ts

@@ -3,3 +3,4 @@ export * from './useLayoutRefs';
 export * from './useHorizontalScroll';
 export * from './useApi';
 export * from './useAuth';
+export * from './useWindowSizes';