Layout: fixed header height

apps/web/Components/Layout/Auth.jsx

@@ -45,13 +45,7 @@ const Logout = styled.a`
 
 function Auth() {
   return (
-    <Flex
-      flexDirection="column"
-      alignItems="flex-end"
-      alignSelf={['flex-start']}
-      justifyContent="space-between"
-      height="100%"
-    >
+    <Flex flexDirection="column" alignItems="flex-end" justifyContent="flex-start" height="100%">
       <User />
       <Logout href="/logout">Выход</Logout>
     </Flex>

apps/web/Components/Layout/Header.jsx

@@ -7,6 +7,7 @@ import { Flex } from 'ui/grid';
 const HeaderContent = styled(Flex)`
   flex-direction: row;
   justify-content: space-between;
+  padding: 14px 12px;
 
   background: linear-gradient(
     90deg,
@@ -15,14 +16,13 @@ const HeaderContent = styled(Flex)`
     var(--color-tertiarty) 100%
   );
 
-  padding: 14px 12px;
   ${min('laptop')} {
-    padding: 14px 12px;
     padding-left: 20px;
   }
 `;
 
 const Wrapper = styled.header`
+  height: var(--height-header);
   position: sticky;
   top: 0;
   z-index: 999999;

apps/web/Components/Layout/index.jsx

@@ -1,11 +1,10 @@
 import Header from './Header';
-import { Flex } from 'ui/grid';
 
 export default function Layout({ children }) {
   return (
-    <Flex flexDirection="column">
+    <>
       <Header />
       <main>{children}</main>
-    </Flex>
+    </>
   );
 }

apps/web/styles/global-style.js

@@ -1,4 +1,5 @@
 import getColors from './colors';
+import { min } from '@/styles/mq';
 import { createGlobalStyle } from 'styled-components';
 
 const { COLOR_PRIMARY, COLOR_SECONDARY, COLOR_TERTIARTY } = getColors();
@@ -9,6 +10,10 @@ export const GlobalStyle = createGlobalStyle`
     --color-primary: ${COLOR_PRIMARY};
     --color-secondary: ${COLOR_SECONDARY};
     --color-tertiarty: ${COLOR_TERTIARTY};
+    --height-header: 60px;
+    ${min('laptop')} {
+    --height-header: 74px;
+    }
     } 
 
  /* Scroll bar stylings */