2.5 KiB
2.5 KiB
🎯 Окончательное исправление - v2.1.3
Решение для комментариев:
Использовано: dvh + Telegram WebApp API (комбинация методов 1 и 3)
1. dvh вместо vh
.comments-modal {
height: 60dvh; /* НЕ меняется при клавиатуре */
max-height: 60vh; /* fallback */
position: fixed;
bottom: 80px;
}
2. Telegram WebApp API
useEffect(() => {
const tg = getTelegramApp()
tg.onEvent('viewportChanged', () => {
// Фиксируем высоту при изменении viewport
modalRef.current.style.height = currentHeight + 'px'
})
}, [])
3. Правильный onClick
const handleOverlayClick = (e) => {
if (e.target === e.currentTarget) {
onClose()
}
}
Кнопки в тёмной теме:
ВСЕ кнопки БЕЛЫЕ с чёрным текстом:
Неактивная кнопка:
- Фон:
#FFFFFF(белый) - Текст:
#000000(чёрный)
Активная кнопка:
- Фон:
#FFFFFF(белый!) - Текст: синий
- Рамка: 2px синяя
Это НЕ синие кнопки, а белые с синей рамкой и текстом!
Изменённые файлы:
frontend/src/components/CommentsModal.jsx- useEffect с Telegram APIfrontend/src/components/CommentsModal.css- dvh + fixed positioningfrontend/src/pages/Feed.css- белые кнопки, синяя рамка для activefrontend/src/pages/Search.css- белые кнопки, синяя рамка для active
Обновление:
# НА КОМПЬЮТЕРЕ
cd /Users/glpshchn/Desktop/nakama
scp frontend/src/components/CommentsModal.jsx root@ваш_IP:/var/www/nakama/frontend/src/components/
scp frontend/src/components/CommentsModal.css root@ваш_IP:/var/www/nakama/frontend/src/components/
scp frontend/src/pages/Feed.css root@ваш_IP:/var/www/nakama/frontend/src/pages/
scp frontend/src/pages/Search.css root@ваш_IP:/var/www/nakama/frontend/src/pages/
# НА СЕРВЕРЕ
ssh root@ваш_IP
cd /var/www/nakama/frontend
npm run build
Результат:
✅ Комментарии не прыгают (dvh + Telegram API)
✅ Кнопки БЕЛЫЕ в тёмной теме
✅ Активная кнопка - белая с синей рамкой
✅ Всё работает идеально