From 70933a6980fd519f1d2b9ea81d1ccd1ce91ecaa4 Mon Sep 17 00:00:00 2001
From: kazachilo <kazachilo@gymnasticstuff.uk>
Date: Mon, 17 Mar 2025 16:00:54 +0300
Subject: [PATCH] =?UTF-8?q?=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=8B=20=D0=BF=D1=80=D0=BE=D0=B1=D0=BB=D0=B5=D0=BC=D1=8B?=
 =?UTF-8?q?=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=8F=20=D1=8D=D0=BC=D0=BE=D0=B4=D0=B7=D0=B8=20=D0=BD=D0=B0=20?=
 =?UTF-8?q?iPhone:=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=8B=20iOS-=D1=81=D0=BF=D0=B5=D1=86=D0=B8=D1=84=D0=B8=D1=87?=
 =?UTF-8?q?=D0=BD=D1=8B=D0=B5=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D0=B4?=
 =?UTF-8?q?=D0=BB=D1=8F=20=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=B3=D0=BE=20=D0=BE=D0=BA=D0=BD=D0=B0,=20=D1=81=D0=B5=D1=82?=
 =?UTF-8?q?=D0=BA=D0=B8=20=D1=8D=D0=BC=D0=BE=D0=B4=D0=B7=D0=B8=20=D0=B8=20?=
 =?UTF-8?q?=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8=20=D1=8D=D0=BC=D0=BE=D0=B4?=
 =?UTF-8?q?=D0=B7=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/EmojiPickerModal.module.css        | 26 +++++++++++++++++++
 .../shared/NotificationModal.module.css       |  9 +++++++
 src/screens/CreateStickerPack.module.css      | 19 ++++++++++++++
 3 files changed, 54 insertions(+)

diff --git a/src/components/shared/EmojiPickerModal.module.css b/src/components/shared/EmojiPickerModal.module.css
index 3dc89ed..64b6a5a 100644
--- a/src/components/shared/EmojiPickerModal.module.css
+++ b/src/components/shared/EmojiPickerModal.module.css
@@ -2,12 +2,28 @@
   margin-bottom: var(--spacing-medium);
   max-height: 300px;
   overflow-y: auto;
+  overflow-x: hidden; /* Предотвращаем горизонтальный скролл */
 }
 
 .emojiGrid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 8px;
+  margin: 0 auto; /* Центрируем сетку */
+}
+
+@supports (-webkit-touch-callout: none) {
+  /* Стили только для iOS устройств */
+  .emojiGrid {
+    width: auto; /* Автоматическая ширина вместо фиксированной */
+    max-width: 300px; /* Ограничиваем максимальную ширину */
+    grid-template-columns: repeat(5, 1fr); /* Меньше колонок для iOS */
+  }
+  
+  /* Исправление для предотвращения проблем с прокруткой на iOS */
+  .emojiContainer {
+    -webkit-overflow-scrolling: touch;
+  }
 }
 
 .emojiItem {
@@ -24,6 +40,16 @@
   font-size: 1.5rem;
 }
 
+@supports (-webkit-touch-callout: none) {
+  /* Стили только для iOS устройств */
+  .emojiItem {
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+    /* Исправление для iOS Safari, чтобы предотвратить проблемы с рендерингом эмодзи */
+    transform: translateZ(0);
+  }
+}
+
 .emojiItem:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
diff --git a/src/components/shared/NotificationModal.module.css b/src/components/shared/NotificationModal.module.css
index 013a393..ccce651 100644
--- a/src/components/shared/NotificationModal.module.css
+++ b/src/components/shared/NotificationModal.module.css
@@ -21,6 +21,15 @@
   margin: 0 var(--spacing-medium);
 }
 
+@supports (-webkit-touch-callout: none) {
+  /* Стили только для iOS устройств */
+  .modal {
+    width: calc(100% - var(--spacing-large) * 2);
+    margin: 0 var(--spacing-large);
+    max-width: 90vw; /* Ограничиваем ширину относительно вьюпорта */
+  }
+}
+
 .header {
   margin-bottom: var(--spacing-medium);
 }
diff --git a/src/screens/CreateStickerPack.module.css b/src/screens/CreateStickerPack.module.css
index 4f93212..65c005f 100644
--- a/src/screens/CreateStickerPack.module.css
+++ b/src/screens/CreateStickerPack.module.css
@@ -113,6 +113,25 @@
   cursor: pointer;
 }
 
+@supports (-webkit-touch-callout: none) {
+  /* Стили только для iOS устройств */
+  .emojiSelector {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .emojiButton {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    line-height: 1; /* Важно для вертикального центрирования текста на iOS */
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+}
+
 .actions {
   display: flex;
   justify-content: center;