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;