Chat card CSS issue

[ian612]

I have an issue where the chat card has scroll bars due to the arrow icon moving to the next line. When I mouse over the text, the scroll bars go away, but when I mouse away from the text, the bars appear again. This causes the chat card text below it to bounce around in a distracting manner.

It shows up in both Chrome and Firefox, though in Chrome it's less noticeable. Images below are of Firefox.

Mouse not over chat card

Mouse over chat card text

[javierriveracastro]

I can't see it.

¿Are you using some specific resolution, or window or font size?. Any other module?

The font looks different for sure.

[javierriveracastro]

Someone has posted an screenshot in Discord with this same problem.

[ian612]

Hey sorry for not responding earlier. I can see this issue without any modules enabled other than Better Rolls, and no special font sizing (at least that I know of). I was able to fix it by using CustomCSS and adding the following rules:

/* Custom CSS */
.overflow-scroll {
  overflow:visible;
}

[javierriveracastro]

I have to make some tests, but (without any testing) I'm afraid that this can cause big skill or item names to break the card layout.

[ian612]

Yeah I’m not sure it’s a good solution to the issue, but it’s a quick hack that patched it for me for now at least. There’s probably a better way to fix it that’s less hacky

[javierriveracastro]

Ok, are you sure that you are updated and that no other module is interfering?

Because that is how the CSS looks on my machine:

As you see it is the same as your hack.

[javierriveracastro]

Waiiitttttt... this is only on hover...

Sorry. I really hate CSS sometimes.

Can you check if this solves your issue:

.overflow-scroll {
  overflow:clip;
}

[javierriveracastro]

As there are no comments I will close it, hopefully solved.

[ian612]

Hi, apologies for not responding earlier. This css solves the issue for me. Thanks!