Moving "X is typing" below the composer

At Discourse we applied:

.rc-message-box {
   padding: 2px 24px 24px 24px;
}

.rc-message-box__typing {
  top: inherit;
  bottom: 6px;
}

image

This emulates what Slack does and kills 22px of whitespace above the composer.

Is this something that should be applied to Rocket Chat?

(also, we need a better category than uncategorized here)

I believe in 0.58.0 and earlier the indicator was actually below the input. Its a very recent change where we moved it up.

As you might be aware we’ve been giving Rocket.Chat a pretty big facelift kind of piece by piece.

I know this particular choice was as a result of the redesign. I think might have been influenced by a few regular issues encountered.

Primarily around there just not being enough real-estate.

Imagine you have a case where you are on mobile web. Tiny amount of space, and then you have two people typing at the same time you are.

aaron.ogle and someonewithalongusername are also typing

I can definitely understand the desire to remove the whitespace. Its especially noticeable when scrolling :grimacing:

image

I’ve create an issue to look into it: Reduce white space above messagebox · Issue #9214 · RocketChat/Rocket.Chat · GitHub

Totally get that, but the problem I have is that this ends up compromising desktop just to keep mobile happy which is not ideal. If mobile needs a magic adjustment it can always be applied via media queries.

Point of reference on one, we have been using it below now for quite a few days and everyone seems fine with it.

1 Like

Seconding this. Having it below on desktop makes a lot of sense.

There is a now a PR open to move it:

https://github.com/RocketChat/Rocket.Chat/pull/10880

But its actually moving it so its at the end of message list… So not always visible. I think still needs refined a bit.