gitlab WebHook messages are not displayed correctly

[fcoppolani]

Description:

Since the upgrade from 3.9 to 3.12, the display of Gitlab notifications are somewhat not correctly displayed.
It is probably linked to #21009 but the behavior is different, and still somewhat incorrect. We never tried the 3.10 version of Rocket.chat.

Steps to reproduce:

1. Create an incoming integration in rocketchat (without any script)
2. Create a webhook in gitlab (version 13.9.x)
3. Fire the webhook in gitlab (push, commit, etc.)

Expected behavior:

Here is what used to be like :

Actual behavior:

And now :

Server Setup Information:

• Version of Rocket.Chat Server: 3.12.1
• Operating System: Centos 7
• Deployment Method: npm
• Number of Running Instances: 1
• DB Replicaset Oplog: enabled
• NodeJS Version: v12.18.4
• MongoDB Version: 3.6.3

Client Setup Information

• Desktop App or Browser Version: tried on native app, firefox, chrome
• Operating System: Windows 10

Relevant logs:

Logs are empty

[Cancer-zern]

Same issue: #21040

[iammattmartin]

This also appears to impact long message lines which are truncated and made to flow to a new line. Likely a change made which broke both.

[adocampo]

Same here, is quite annoying as they are show as two columns, so most webhooks are completely borked. There is an embedded CSS class rcx-css-viuaf9 which hardcodes the width to 480px. By removing it on developer tools, it shows the webhooks correctly.
I couldn't find, though, where this max-width: 480px !important is set, and I don't really know why isn't present in any css but embedded in the html. I'm not a frontend developer myself, but I would swear this is not a best practice.
My bet is it should be the 100% width and let the browser to resize accordingly to the div

Examples:
with the class

without it

with the class

without it

[geekgonecrazy]

@RocketChat/frontend I think this might be known. I remember noticing something like this change and there being a reason. Can you give any insight here please? As this does look like a breaking change

[Cancer-zern]

Same for me
If i open by Android App it is fine.
Browser or windows app it isn't fine

[fleaz]

Hey,
we have the same issue on 3.13.2

This affects not only the Gitlab integration, but every message send via the API (both sendMessage and postMesssage) which has an attachments. Even with a single attachment the width is capped at 480px which is quite narrow.

Easy way to reproduce:
POST against /api/v1/chat.postMessage:

{
    "channel": "#test",
    "attachments": [
        {
            "text": "This is a very long text which will be split into multiple rows due to the max-width parameter..."
        }
    ]
}

[cocatrice]

We are having exactly the same issue in 3.14.1.

We have also noticed that all the newline in attachment field is broken.

Can we please request a fix for this one?

[Exordian]

Sadly, this breaks many integrations of us. Especially ones we can't change, since they're designed as slack connector and this change introduced a breaking change to slack notifications. We're eagerly awaiting a fix :)

[Cancer-zern]

@RocketChat/frontend I think this might be known. I remember noticing something like this change and there being a reason. Can you give any insight here please? As this does look like a breaking change

When you will fix this issue?

[iammattmartin]

It's a sad day when you ditch Rocket.Chat for something else because they can't fix things they've broken nearly more than 5 months ago.

[pkroll61]

Ran into this when we upgraded to 4.4.1. A quick work around I found was adding some layout custom css.

div.rcx-css-viuaf9 { margin-block: 0.25rem !important; width: 100% !important; max-width: 100% !important; display: flex !important; overflow: hidden !important; flex-direction: column !important; }

[duven87]

Ran into this when we upgraded to 4.4.1. A quick work around I found was adding some layout custom css.

div.rcx-css-viuaf9 { margin-block: 0.25rem !important; width: 100% !important; max-width: 100% !important; display: flex !important; overflow: hidden !important; flex-direction: column !important; }

Where do I have to add these lines?

[pkroll61]

As admin go to Administration -> Layout -> Custom CSS and paste in there. Hope it helps ya!

[duven87]

Thank you very much, it works correctly. The bad thing is that the links are still broken...
If I click on the partially visible link in the bot comment, the browser only opens that visible part, not the whole link.

[pkroll61]

Ah we never had links so never ran into that case. We have since moved away from rocketchat so unfortunately I cant play around with it anymore. Best of luck!