Management Panel's Text Overflowed

[zhiyan114]

Describe the bug

When using a high number value or a different font (via different system language), the text under nodes, specifically, low watermark and high watermark will overflow out to the box.

Reproduction steps

1. Set the system language that has a bigger font (i.e. chinese)
2. Increase the value for vm_memory_high_watermark or disk_free_limit so that it produces a longer text

Expected behavior

The text should either be truncated or somehow contained in the table box.

Additional context

No response

[michaelklishin]

I'm afraid I won't change my system language. What values of vm_memory_high_watermark or disk_free_limit did you use to make the text overflow? On what management UI page did this happen?

[zhiyan114]

Hey actually, I may have incorrectly described the reproduction. It seems like the issue will only occur if chrome uses a larger-sized font (which happens to occur when you change the system language). For a smaller font language, like English, this wouldn't be an issue unless you set those configuration to a very high value.

Something like this would happen when I set the system language that causes chrome to use a larger font.

[michaelklishin]

Thanks.

This is a combination of a few factors:

• Larger fonts
• Certain VM memory watermark (which cannot be set to a value higher than the amount of available RAM on operating systems where the node can compute it)

Even fixing the font to always use a fixed font size won't help much. "Watermark" could be changed to "mark" but that's not particularly descriptive.

I think we will let things be as they are and let the user pick the font size they want. Dynamically
adjusting font size has a risk of confusing or frustrating the user in certain cases.

[zhiyan114]

I do believe that text truncation (when the text exceeds the box size) can potentially help with this issue. Users that are using the panel already will likely recognize what the missing text would be.

But ye, if you want to keep things as it is, that's totally fine since this is more of UI cleanliness that bothers me than an actual issue that requires an immediate patch.

[michaelklishin]

I recall there is a CSS property that can make the text truncate instead of overflowing. I will give it a shot.