htmlcssflexboxcss-positioncss-float

How to align metadata (time and icon) in a chat bubble layout when text is short?

How it should look "the correct version"
How it should look "the correct version"

How it looks, "the incorrect version"
How it looks, "the incorrect version"

The metadata looks ok when the text is long, however, when the text is short for example, the user sends "Ok" the metadata is not positioned correctly.

I have tried using display flex but the problem is the message does not wrap around the metadata which ends up looking like the is too much padding at the right. Right now when the user sends a short message like "Ok" the metadata is not shown properly. I can't find that balance.

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;
}
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

<div class="chat-window">
  <div class="message sent">
    <p>Pel
    </p>
    <span class="metadata">
            <span class="time">21:08</span>
    <span class="tick">
                <svg width="20px" height="20px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="none">
                    <path stroke="#535358" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 17l5 5 12-12M16 20l2 2 12-12"/>
                  </svg>
            </span>
    </span>
  </div>
</div>

Solution

  • Try using javascript:

    let message = document.querySelector(".message");
if(message.innerText.length < 75){
    message.style.padding = "8px 75px 8px 8px";
}
else{
    message.style.padding = "8px 8px 8px 8px"
}