Feat: Show monitor ID in Details

[chakflying]

⚠️⚠️⚠️ Since we do not accept all types of pull requests and do not want to waste your time. Please be sure that you have read pull request rules:
https://github.com/louislam/uptime-kuma/blob/master/CONTRIBUTING.md#can-i-create-a-pull-request-for-uptime-kuma

Tick the checkbox if you understand [x]:

• I have read and understand the pull request rules.

Description

Fixes #4274

Type of change

• User interface (UI)

Checklist

• My code follows the style guidelines of this project
• I ran ESLint and other linters for modified files
• I have performed a self-review of my own code and tested it
• I have commented my code, particularly in hard-to-understand areas (including JSDoc for methods)
• My changes generates no new warnings
• My code needed automated testing. I have added them (this is optional task)

Screenshots (if any)

[Zaid-maker]

Amazing feature

[CommanderStorm]

I am not quite convinced the current design fits as is.
I think adding this

• as a tag (like "web" in the screenshot)
• or as a grayer, smaller #ID next to the title could work better.

Have you experimented with these approaches?

[chakflying]

Personally, I don't like the "Tag that is not a Tag" design, and the font size had to be further reduced to fit in the same layout.

Putting it next to the title looks fine, but because the title is variable length, the location would move around, which is not convenient for finding it, and we have to deal with overflow.

Using # is also undesirable since it makes selecting only the ID for copying harder.

[Saibamen]

Using # is also undesirable since it makes selecting only the ID for copying harder.

What? Just double-click on number: #1421343224

This is what will be selected - no # in selection:

[Saibamen]

Or you can implement copy ID button :)

[CommanderStorm]

since it makes selecting only the ID for copying harder

Have not tested it, but I think this can be disabled: https://dev.to/smpnjn/how-to-disable-text-selection-with-css-4jan

[chakflying]

Using # is also undesirable since it makes selecting only the ID for copying harder.

What? Just double-click on number: #1421343224

This is what will be selected - no # in selection:

Unfortunately does not work on Firefox Mobile, I guess it depends on browser/OS support.

Using CSS to disable selection is a valid option I guess.

[louislam]

I think I may prefer this, but with smaller font size. Because it does not require a new line when there are no tags.

For highlight issue, I think inline-block should do the trick.
https://jsfiddle.net/louislam/cLw0rbxy/

[chakflying]

Updated design according to suggestions.