diff --git a/frontend/src/components/CommentsModal.css b/frontend/src/components/CommentsModal.css index 0d28c48..36415fd 100644 --- a/frontend/src/components/CommentsModal.css +++ b/frontend/src/components/CommentsModal.css @@ -1,4 +1,4 @@ -/* Оверлей для комментариев */ +/* Максимально простое решение */ .comments-modal-overlay { position: fixed; top: 0; @@ -6,36 +6,29 @@ right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); + z-index: 1000; display: flex; align-items: flex-end; - justify-content: center; - z-index: 1000; - animation: fadeIn 0.2s; - padding-bottom: env(safe-area-inset-bottom, 0px); - overflow: hidden; + padding-bottom: 80px; } .comments-modal { width: 100%; max-width: 600px; - height: 55dvh; /* dvh не меняется при клавиатуре */ - max-height: 55vh; /* fallback для старых браузеров */ + max-height: 60vh; + background: var(--bg-secondary); + border-radius: 16px 16px 0 0; display: flex; flex-direction: column; - border-radius: 16px 16px 0 0; - background: var(--bg-secondary); - animation: slideUp 0.3s ease-out; margin: 0 auto; } -/* Хедер модалки */ .comments-modal .modal-header { + padding: 16px; + border-bottom: 1px solid var(--divider-color); display: flex; align-items: center; justify-content: space-between; - padding: 16px; - border-bottom: 1px solid var(--divider-color); - background: var(--bg-secondary); flex-shrink: 0; } @@ -54,18 +47,12 @@ display: flex; align-items: center; justify-content: center; - flex-shrink: 0; } .comments-modal .close-btn svg { stroke: currentColor; } -.comments-modal .close-btn:active { - background: var(--bg-primary); -} - -/* Список комментариев */ .comments-list { flex: 1; overflow-y: auto; @@ -76,18 +63,14 @@ } .empty-comments { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; padding: 40px 20px; - gap: 8px; + text-align: center; } .empty-comments p { color: var(--text-primary); font-size: 16px; - font-weight: 500; + margin-bottom: 8px; } .empty-comments span { @@ -95,7 +78,6 @@ font-size: 14px; } -/* Комментарий */ .comment-item { display: flex; gap: 12px; @@ -106,20 +88,16 @@ height: 36px; border-radius: 50%; object-fit: cover; - flex-shrink: 0; } .comment-content { flex: 1; - display: flex; - flex-direction: column; - gap: 4px; } .comment-header { display: flex; - align-items: center; gap: 8px; + margin-bottom: 4px; } .comment-author { @@ -137,26 +115,15 @@ font-size: 14px; line-height: 1.5; color: var(--text-primary); - word-wrap: break-word; } -/* Форма ввода комментария */ .comment-form { - display: flex; - gap: 8px; padding: 12px 16px; border-top: 1px solid var(--divider-color); background: var(--bg-secondary); + display: flex; + gap: 8px; flex-shrink: 0; - border-radius: 0 0 16px 16px; - position: sticky; - bottom: 0; -} - -/* Фикс для iOS - предотвращение прыжков */ -.comment-form input:focus { - transform: translateZ(0); - -webkit-transform: translateZ(0); } .comment-form input { @@ -166,6 +133,7 @@ background: var(--bg-primary); color: var(--text-primary); font-size: 15px; + border: none; } .send-btn { @@ -177,7 +145,8 @@ display: flex; align-items: center; justify-content: center; - flex-shrink: 0; + border: none; + cursor: pointer; } .send-btn svg { diff --git a/frontend/src/components/CommentsModal.jsx b/frontend/src/components/CommentsModal.jsx index 68afb6b..0764fe9 100644 --- a/frontend/src/components/CommentsModal.jsx +++ b/frontend/src/components/CommentsModal.jsx @@ -1,36 +1,13 @@ -import { useState, useEffect, useRef } from 'react' +import { useState } from 'react' import { X, Send } from 'lucide-react' import { commentPost } from '../utils/api' -import { hapticFeedback, getTelegramApp } from '../utils/telegram' +import { hapticFeedback } from '../utils/telegram' import './CommentsModal.css' export default function CommentsModal({ post, onClose, onUpdate }) { const [comment, setComment] = useState('') const [loading, setLoading] = useState(false) const [comments, setComments] = useState(post.comments || []) - const modalRef = useRef(null) - - useEffect(() => { - const tg = getTelegramApp() - - if (tg) { - // Фиксировать высоту при изменении viewport (клавиатура) - const handleViewportChange = () => { - if (modalRef.current) { - const currentHeight = modalRef.current.offsetHeight - modalRef.current.style.height = `${currentHeight}px` - } - } - - tg.onEvent('viewportChanged', handleViewportChange) - - return () => { - if (tg.offEvent) { - tg.offEvent('viewportChanged', handleViewportChange) - } - } - } - }, []) const handleSubmit = async () => { if (!comment.trim()) return @@ -66,7 +43,7 @@ export default function CommentsModal({ post, onClose, onUpdate }) { return (
-
e.stopPropagation()}> +
e.stopPropagation()}> {/* Хедер */}