RocketChat/Rocket.Chat

Omnichannel transfer comment is not wrapped to multiple lines

Open

#26723 opened on Aug 29, 2022

View on GitHub
 (62 comments) (0 reactions) (0 assignees)TypeScript (45,311 stars) (13,573 forks)batch import
area: ui/uxgood first issuehacktoberfest

Description

Description:

When transferring omnichannel conversation to another agent with a comment, text is not wrapping to new line, going out of the line with "...".

Steps to reproduce:

  1. Agent A: Receive omnichannel conversation.
  2. Transfer it to agent B, leaving long text comment.
  3. See on agent B's chat non-wrapped text (rest of it is not visible).

Expected behavior:

Transfer comment text is wrapped to multiple lines if needed.

Actual behavior:

Transfer comment text is rendered in a single line, which is hidden behind the end of the line.

image

Server Setup Information:

  • Version of Rocket.Chat Server: 5.0.4
  • Operating System: Ubuntu 20.04
  • Deployment Method: docker
  • Number of Running Instances: 1
  • DB Replicaset Oplog: Enabled
  • NodeJS Version: v14.19.3
  • MongoDB Version: 5.0.11 / wiredTiger

Client Setup Information

  • Desktop App or Browser Version: Desktop 3.8.7
  • Operating System: Windows 10

Additional context

─

Relevant logs:

─

Contributor guide

Tech stack
typescriptreactcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSS basicsReact component stylingRocket.Chat omnichannel UI
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
The bug is a CSS text wrapping issue in the omnichannel transfer comment component. First, locate the relevant component, likely in the 'omnichannel' directory of the frontend codebase. Apply CSS properties like 'word break: break word' or 'overflow wrap: break word' to the comment container. Ensure the container has a defined width or max width. Test the fix locally with a long comment string.