Use two lines for friendly name

[mueller-ma]

⚠️ Please verify that this bug has NOT been raised before.

• I checked and didn't find similar issue

🛡️ Security Policy

• I agree to have read this project Security Policy

Description

When the friendly name is too long, it isn't shown fully on small displays like phones. The name could use multiple lines, so it's shown. Maybe limit this to two or three lines.

👟 Reproduction steps

Create a new monitor with "Very loooooooooooong name".

👀 Expected behavior

Full name is shown

😓 Actual Behavior

🐻 Uptime-Kuma Version

1.23.11

💻 Operating System and Arch

Windows 10

🌐 Browser

Firefox 121.0.1

🐋 Docker Version

No response

🟩 NodeJS Version

No response

📝 Relevant log output

No response

[CommanderStorm]

Idk how where new line there would fit into our UI.
Why do you wan't so long titles? Could you give a real example as motivation?

[chakflying]

I don't think this should be considered a bug, since it's more of a design choice.

[mueller-ma]

The title doesn't have to be super long. For example from the screenshot in the Readme "Inbox by Gmail". When I use Chrome to emulate "Galaxy Fold", the title isn't fully shown:

Some services require more words to describe themselves for all users. For example "Active Directory" can be hard to understand for users where "Login on Windows Systems" is longer, but better understandable.

I don't think this should be considered a bug, since it's more of a design choice.

IMO anyone who wishes to can keep their titles short, but I personally prefer the full title to be shown.

[chakflying]

FYI in Settings -> Appearance, you can move the heartbeat bar to the bottom, which will give you plenty more space.

[mueller-ma]

This setting doesn't influence the status page, but the dashboard only. And it's only for logged in user, not for every visitor: #1858

[mueller-ma]

If you agree I can create a PR for this.

[mueller-ma]

What about adding a mouse over text for the title? At least on PC users can view the full title then.

[mueller-ma]

The following custom CSS enables line wrap for long titles:

.hp-bar-big {
  padding: 0; 
}
.monitor-list .item .info {
  white-space: normal;
}