Мобильная версия
Как это должно выглядеть " правильная версия"
Как это выглядит: «неправильная версия»
Метаданные выглядят нормально, когда текст длинный, однако, когда текст, например, короткий, пользователь отправляет метаданные «ОК». позиционируется неправильно.
Я пробовал использовать гибкий дисплей, но проблема в том, что сообщение не охватывает метаданные, что в конечном итоге выглядит так, будто справа слишком много отступов. Сейчас, когда пользователь отправляет короткое сообщение типа «ОК», метаданные не отображаются должным образом. Я не могу найти этот баланс.
Код: Выделить всё
html {
font-family: "Roboto", serif;
}
.chat-window {
width: 500px;
display: flex;
}
.message {
margin: 0;
font-size: 14.2px;
position: relative;
padding: 16px;
}
.message p {
margin: 0;
}
.sent {
justify-content: end;
background-color: #ECF9FD;
}
.metadata {
float: right;
position: absolute;
bottom: 0;
right: 5px;
white-space: nowrap;
}
.time {
font-size: 12px;
}Код: Выделить всё
Pel
21:08
Подробнее здесь: https://stackoverflow.com/questions/791 ... t-is-short
