лучшения интерфейса: 1) пущен крестик закрытия предпросмотра ниже хедера на iPhone; 2) величен нижний отступ в галерее для предотвращения перекрытия изображений футером

src/components/layout/Layout.module.css

@@ -20,6 +20,7 @@
   -webkit-overflow-scrolling: touch; /* Улучшаем инерционный скроллинг на iOS */
   padding-top: 0px; /* Уменьшаем отступ до 20px */
   overscroll-behavior: contain; /* Ограничивает эффект скролла только этим элементом */
+  height: calc(100% - 4rem); /* Вычитаем высоту навигации */
 }
 
 .container {

src/components/shared/ImageViewer.module.css

@@ -51,3 +51,10 @@
     max-height: 80vh; /* Немного уменьшаем высоту на мобильных */
   }
 }
+
+/* Медиа-запрос для iOS устройств (iPhone) */
+@supports (-webkit-touch-callout: none) {
+  .closeButton {
+    top: calc(var(--safe-area-inset-top) + 60px); /* Учитываем безопасную область сверху и добавляем отступ */
+  }
+}

src/contexts/ImageViewerContext.tsx

@@ -0,0 +1,26 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+interface ImageViewerContextType {
+  isImageViewerOpen: boolean;
+  setImageViewerOpen: (isOpen: boolean) => void;
+}
+
+const ImageViewerContext = createContext<ImageViewerContextType | undefined>(undefined);
+
+export const ImageViewerProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [isImageViewerOpen, setImageViewerOpen] = useState(false);
+
+  return (
+    <ImageViewerContext.Provider value={{ isImageViewerOpen, setImageViewerOpen }}>
+      {children}
+    </ImageViewerContext.Provider>
+  );
+};
+
+export const useImageViewer = (): ImageViewerContextType => {
+  const context = useContext(ImageViewerContext);
+  if (context === undefined) {
+    throw new Error('useImageViewer must be used within an ImageViewerProvider');
+  }
+  return context;
+};

src/screens/Gallery.module.css

@@ -12,7 +12,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-large);
-  padding: calc(3rem + var(--spacing-small)) var(--spacing-medium) var(--spacing-large);
+  padding: calc(3rem + var(--spacing-small)) var(--spacing-medium) calc(6rem + var(--safe-area-inset-bottom));
   width: 100%;
   box-sizing: border-box;
   overflow-y: auto;

src/screens/Home.module.css

@@ -70,7 +70,7 @@
 
 .generateButtonContainer {
   position: fixed;
-  bottom: calc(5rem + var(--safe-area-inset-bottom)); /* Уменьшенный отступ от навигации */
+  bottom: calc(4.5rem + var(--safe-area-inset-bottom)); /* Уменьшенный отступ от навигации */
   left: var(--spacing-medium);
   right: var(--spacing-medium);
   width: auto;

src/screens/StickerPacks.module.css

@@ -2,9 +2,11 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-large);
-  padding: calc(3rem + var(--spacing-small)) var(--spacing-medium) var(--spacing-large);
+  padding: calc(3rem + var(--spacing-small)) var(--spacing-medium) calc(var(--spacing-large) + 80px);
   width: 100%;
   box-sizing: border-box;
+  overflow-y: auto; /* Разрешаем скроллинг */
+  height: 100%; /* Устанавливаем высоту */
 }
 
 .header {
@@ -82,14 +84,14 @@
   
   /* Фиксируем кнопку внизу экрана */
   position: fixed;
-  bottom: calc(78px + var(--spacing-large)); /* Увеличенный отступ от навигации */
+  bottom: calc(5.5rem + var(--safe-area-inset-bottom)); /* Увеличенный отступ от навигации */
   left: var(--spacing-medium);
   right: var(--spacing-medium);
   width: auto; /* Вместо width: 100% */
   max-width: calc(28rem - 2 * var(--spacing-medium)); /* Соответствует ширине контейнера */
   margin: 0 auto; /* Центрирование */
   transform: none; /* Убираем transform: translateX(-50%) */
-  z-index: 90;
+  z-index: 100; /* Увеличиваем z-index */
   
   /* Остальные стили */
   background-color: var(--color-primary);