visual-bug: text cuts off panel widget when project name is too long

[SethFalco]

Describe the issue

When the project name is too long ("Magick Image Reader" in my case), it renders outside of the bounds of the Open Graph image.

To Reproduce the issue

Steps to reproduce the behavior:

1. Start creating a project (or edit an existing one)
2. Set the "project name" to something long (such as "Magick Image Reader")
3. Head to the /widgets/{project} for the project
4. Observe the "Panel" widget

Expected behavior

A clean image with logically placed parts, and truncation if it otherwise wouldn't fit the image well.

For example:

• Set the text size based on the width of the text. (not the number of characters)
• Add an ellipsis at the end. (it might look bad, but it'd look better than having text cut off)

Alternatively, specific things could be done if the text is only slightly larger:

• Remove the word "Project"

I don't think the alternative solutions are nice, seems like it'd just overcomplicate how the image is built as it doesn't scale to any/all lengths.

Screenshots

Example of the issue on my Weblate instance:

Example of how GitHub handles long repository names with spaces:

Example of how GitHub handles long repository names without spaces:

Server configuration and status

Weblate installation: Docker Compose

(Omitted the rest as it's just a visual issue.)

[github-actions]

Thank you for your report; the issue you have reported has just been fixed.

• In case you see a problem with the fix, please comment on this issue.
• In case you see a similar problem, please open a separate issue.
• If you are happy with the outcome, don’t hesitate to support Weblate by making a donation.