fix: do not wrap header content, wrap long title

[web-padawan]

Description

Fixes #4309

Type of change

• Bugfix

[rolfsmeds]

Also note the latter part of #4309, about header-content getting pushed outside the dialog

[web-padawan]

@rolfsmeds Updated the PR to also break a long single word in header title.

[rolfsmeds]

@rolfsmeds Updated the PR to also break a long single word in header title.

Need to test that this does not cause unnecessary word-breaking (e.g. breaks word instead of making Dialog bigger when there's room for it)

I'm frankly a teeny bit nervous about word-breaking by default. I'd have been fine with just clipping and text-overflow:ellipsis to ensure that it doesn't push header-content outside.

Perhaps @jouni has an opinion on the matter.

[jouni]

breaks word instead of making Dialog bigger when there's room for it

Could this actually happen in some situation? I assume no, and I think then it would be okay to break the word instead of clipping it.

[rolfsmeds]

breaks word instead of making Dialog bigger when there's room for it

Could this actually happen in some situation? I assume no, and I think then it would be okay to break the word instead of clipping it.

My hunch is no, but I'm never entirely sure how browsers decide between wrap/shrink elements and make the container bigger to fit them. Thus the need to test.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[sissbruecker]

Need to test that this does not cause unnecessary word-breaking (e.g. breaks word instead of making Dialog bigger when there's room for it)

Tested this, it's not an issue, the dialog will expand first before breaking words.

[vaadin-bot]

Hi @web-padawan , this commit cannot be picked to 23.1 by this bot, can you take a look and pick it manually?
Error Message: Error: Command failed: git cherry-pick d24f64f
error: could not apply d24f64f... fix: do not wrap header content, wrap long title (#4310)
hint: After resolving the conflicts, mark them with
hint: "git add/rm ", then run
hint: "git cherry-pick --continue".
hint: You can instead skip this commit with "git cherry-pick --skip".
hint: To abort and get back to the state before "git cherry-pick",
hint: run "git cherry-pick --abort".

[vaadin-bot]

This ticket/PR has been released with Vaadin 23.2.0.beta1 and is also targeting the upcoming stable 23.2.0 version.