Chat page redesign for a different user experience

General
1

I made a few simple tweaks to the chat page to improve the design and make it feel smoother. Here’s a rundown of the changes I made:

  1. Moved the Typing Indicator:
    I repositioned the typing indicator so it now shows up above the text box instead of below it. It just feels more natural and easier to notice when someone is typing.
  2. Increased the Font Size of the Typing Indicator:
    I made the font size of the typing indicator a bit bigger. It’s now more visible and stands out a little more, making it easier to read at a glance.
  3. Cleaned Up Images:
    I removed the document name/URL that used to surround the images, and I added a small border radius to them. This gives the images a cleaner, more polished look and removes unnecessary clutter.
  4. Made the Typing Indicator More Dynamic:
    I added a little dynamic effect to the typing indicator. Now, when it pops up, the messages slide up slightly to make space, and when the indicator disappears, the messages slide back down. This smooth transition just makes the whole experience feel more fluid and interactive.

These are just small design tweaks. For me it looks cleaner, feels smoother, and overall just more polished. Let me know what you think, and feel free to suggest any other changes or improvements!

Here is the code:

// typing indicator
/* Add space below the replying indicator */
.chat-replying-indicator-container {
  order: -1; /* Moves the replying indicator above the text area */
}


.chat-composer__outer-container {
    display: flex
;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding-inline: 0rem;
    padding-bottom: 1rem;
}

.chat-message-collapser .chat-message-collapser-header {
  display: none;
  align-items: center;
}


.chat-message .onebox img:not(.ytp-thumbnail-image, .onebox-avatar-inline), 
.chat-message img.onebox, 
.chat-message .chat-uploads img, 
.chat-message p img, 
.chat-message aside.onebox .onebox-body .aspect-image-full-size, 
.chat-message aside.onebox .onebox-body .aspect-image-full-size img, 
.chat-message .chat-message-text p img:not(.emoji) {
  object-fit: cover; /* Cover the container to preserve the border-radius */
  max-height: 300px;
  max-width: 90%;
  width: unset;
  overflow: hidden;
  border-radius: 20px; /* Rounded corners */
}


.chat-replying-indicator {
  color: var(--primary-medium);
  display: inline-flex;
  font-size: 1em;
  padding-bottom:10px;
}

.chat-replying-indicator-container {
    margin-bottom: 10px; /* Adjust the value as needed */
    margin-top: -20px;
}
.chat-replying-indicator-container {
    margin-top: -30px; /* Default position when not typing */
    transition: margin-top 0.3s ease; /* Smooth transition */
}

.chat-replying-indicator-container:has(.chat-replying-indicator__text) {
    margin-top: 0px; /* Position when typing */
}

PS: This is specially for mobile.

This is how it looks like now:

2 Likes
2

Your video seems broken. Perhaps re-upload it?

1 Like
3

For transparency, I edited your title. :wink:

3 Likes
4

Hehe, I always use Topic title from AI :stuck_out_tongue:

5

I’m not sure why this is happening since yesterday. Me and @Don had a conversation about the same issue, and it worked after a while, but now it’s broken again.

1 Like
6

Works for me right now

7

Yeah, actually I reuploaded the video using a Mac; the problem generally happens with iOS for me :((