Когда количество сообщений в чате увеличивается и они занимают больше пространства, нижние сообщения оказываются за полем ввода сообщения и становятся недоступными для просмотра. Это происходит из-за того, что элементы верстки не адаптированы правильно и не учитывают высоту поля ввода.
поле для ввода сообщений должна также быть выше кнопок назад, средина и диспетчер задач, которые стандартные у андроид

Давайте исправим эту проблему, чтобы область сообщений чата корректно отображалась и была прокручиваемой, а нижние сообщения не скрывались за полем ввода.

код chat.php 

<?php
// chat.php
// Кодування UTF-8

header('Content-Type: text/html; charset=utf-8');

session_start();
require_once 'db.php';

if (!isset($_GET['expert_id'])) {
    header('Location: index.php');
    exit;
}

$expertId = (int)$_GET['expert_id'];
$expert = getExpertById($expertId);

if (!$expert) {
    header('Location: index.php');
    exit;
}

// Ініціалізація чату
$chatId = initChat($expertId);
$messages = getChatMessages($chatId);
?>

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Чат з <?= htmlspecialchars($expert['name']) ?> - Світ Екстрасенсів</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/chat.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/chat.js"></script>
</head>
<body>
    <div class="chat-header">
        <img src="uploads/<?= htmlspecialchars($expert['photo']) ?>" alt="<?= htmlspecialchars($expert['name']) ?>" class="chat-expert-photo">
        <h2><?= htmlspecialchars($expert['name']) ?></h2>
        <!-- Кнопка керування звуком -->
        <div class="sound-toggle">
            <img src="images/sound-on.png" alt="Звук увімкнено" id="sound-icon">
        </div>
    </div>

    <div class="chat-messages" id="chat-messages" data-chat-id="<?= $chatId ?>">
        <!-- Повідомлення будуть оновлюватися AJAX-ом -->
    </div>

    <div class="chat-input">
        <form id="chat-form" enctype="multipart/form-data">
            <input type="hidden" name="chat_id" value="<?= $chatId ?>">
            <label for="attachment" class="attachment-label">
                📎
                <input type="file" name="attachment" id="attachment" style="display: none;">
            </label>
            <textarea name="message" id="message" placeholder="Введіть ваше повідомлення..." required></textarea>
            <button type="submit">Надіслати</button>
        </form>
    </div>
</body>
</html>


код chat.css

/* css/chat.css */
/* Кодування UTF-8 */

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #0e0e0e;
    color: #fff;
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Додаємо, щоб розташувати елементи по боках */
    padding: 10px;
    background-color: #1e1e1e;
    flex-shrink: 0;
}
.chat-header img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

.chat-header h2 {
    margin-left: 10px;
    flex-grow: 1; /* Займає доступний простір між фото та кнопкою звуку */
}

/* Стилі для кнопки керування звуком */
.sound-toggle {
    cursor: pointer;
}

.sound-toggle img {
    width: 24px;
    height: 24px;
}

.chat-messages {
    padding: 20px;
    height: calc(100vh - 160px);
    overflow-y: auto;
    background-color: #0e0e0e;
}

.message {
    display: flex;
    margin-bottom: 20px;
}

.expert-message {
    flex-direction: row;
}

.user-message {
    flex-direction: row-reverse;
}

.message img {
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

.message-content {
    background-color: #1e1e1e;
    padding: 10px;
    border-radius: 10px;
    max-width: 70%;
    margin: 0 10px;
}

.message-content p {
    margin: 0;
}

.chat-input {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #1e1e1e;
    padding: 10px;
}

.chat-input form {
    display: flex;
    align-items: center;
}

.chat-input textarea {
    width: 100%;
    height: 50px;
    resize: none;
    border: none;
    padding: 10px;
    margin-left: 10px;
    border-radius: 10px;
    background-color: #2e2e2e;
    color: #fff;
}

.chat-input button {
    background-color: #6a82fb;
    border: none;
    padding: 10px 20px;
    margin-left: 10px;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

.chat-input button:hover {
    background-color: #5a72eb;
}

.attachment-label {
    cursor: pointer;
    font-size: 24px;
    color: #6a82fb;
}

.attachment-label input {
    display: none;
}

@media (max-width: 768px) {
    .chat-messages {
        padding: 10px;
    }

    .message-content {
        max-width: 80%;
    }
}

Claude 3.5 Sonnet
Чтобы решить проблему с отображением сообщений и адаптировать интерфейс для Android, давайте внесем следующие изменения в ваш CSS-файл (chat.css):

Копіювати
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #0e0e0e;
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #1e1e1e;
    flex-shrink: 0;
}

.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: #0e0e0e;
}

.chat-input {
    background-color: #1e1e1e;
    padding: 10px;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.chat-input form {
    display: flex;
    align-items: center;
}

.chat-input textarea {
    flex-grow: 1;
    height: 50px;
    resize: none;
    border: none;
    padding: 10px;
    margin-right: 10px;
    border-radius: 10px;
    background-color: #2e2e2e;
    color: #fff;
}

.chat-input button {
    background-color: #6a82fb;
    border: none;
    padding: 10px 20px;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

/* Добавьте отступ снизу для учета системных кнопок Android */
@media (max-width: 768px) {
    body {
        padding-bottom: 48px; /* Примерная высота системных кнопок */
    }
    
    .chat-input {
        position: fixed;
        bottom: 48px;
        left: 0;
        right: 0;
    }
}