Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve rendering of VM descriptions #1901

Merged

Conversation

mvollmer
Copy link
Member

Render the description as a single paragraph, with preserved line breaks and word breaking on overflow.

Fixes #1888, #1890.

@mvollmer
Copy link
Member Author

Looks like this this, for example:

image

The last line has no spaces in it at all, and is broken in the middle of words to avoid overflow.

The second to last line is long but has spaces. It is broken between words to avoid overflow.

Render the description as a single paragraph, with preserved line
breaks and word breaking on overflow.

Fixes cockpit-project#1888, cockpit-project#1890.
@mvollmer mvollmer force-pushed the improve-description-formatting branch from d9d9051 to 4b430e8 Compare November 11, 2024 11:34
Copy link
Member

@garrett garrett left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

The only suggestion I have is adding in hyphenations: auto to let the browser hyphenate when appropriate.

Comment on lines +106 to +109
.vm-description {
white-space: pre-wrap;
overflow-wrap: break-word;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could also have a hyphens: auto; in there; it's relatively new-ish in baseline 2023 and will hyphenate things it needs to wrap with break-word.

https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

The hyphens CSS property specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.

@mvollmer mvollmer requested a review from jelly November 21, 2024 15:04
@mvollmer mvollmer merged commit 61e98e9 into cockpit-project:main Nov 26, 2024
28 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

The description is not entirely displayed if the description is too long during setting the VM description
3 participants