справление отступа между хедером и контентом, уменьшение с 60px до 20px

src/components/layout/Header.module.css

@@ -6,6 +6,7 @@
   left: 0;
   right: 0;
   z-index: 100;
+  padding-top: var(--safe-area-inset-top); /* Учитываем безопасную область сверху */
   /* Удалены эффекты размытия и прозрачности */
 }
 

src/components/layout/Layout.module.css

@@ -6,6 +6,8 @@
   flex-direction: column;
   width: 100%;
   overflow: hidden;
+  position: relative; /* Добавляем относительное позиционирование */
+  height: 100%; /* Устанавливаем высоту 100% */
 }
 
 .main {
@@ -13,6 +15,9 @@
   position: relative;
   -webkit-overflow-scrolling: touch;
   width: 100%;
+  overflow-y: auto; /* Разрешаем скроллинг только для основного контента */
+  -webkit-overflow-scrolling: touch; /* Улучшаем инерционный скроллинг на iOS */
+  padding-top: 0px; /* Уменьшаем отступ до 20px */
 }
 
 .container {

src/components/layout/Navigation.module.css

@@ -6,6 +6,7 @@
   background-color: #FFFFFF; /* Непрозрачный белый, как у хедера */
   border-top: 1px solid var(--color-border); /* Добавляем верхнюю границу как у хедера */
   z-index: 100;
+  padding-bottom: var(--safe-area-inset-bottom); /* Учитываем безопасную область снизу */
   /* Удалены эффекты размытия и прозрачности */
 }
 

src/index.css

@@ -18,6 +18,12 @@
   --spacing-small: 0.5rem;
   --spacing-medium: 1rem;
   --spacing-large: 1.5rem;
+  
+  /* Безопасные области */
+  --safe-area-inset-top: env(safe-area-inset-top, 0px);
+  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-area-inset-left: env(safe-area-inset-left, 0px);
+  --safe-area-inset-right: env(safe-area-inset-right, 0px);
 }
 
 #root {