Skip to content

Bug - Modal - overflow-wrap migration from word-break was applied wrong #8484

Description

@Venefilyn

Describe the problem
This is an issue with

  • Patternfly 5

  • Patternfly 6

  • other

Within Cockpit I saw a regression with PF 6.6.0 bump where our modal suddenly doesn't wrap text correctly. As far as I can tell there aren't any CSS rules on our end that would warrant this.

Root cause determined to be the migration of word-break to overflow-wrap where the migration was not done correctly.
According to MDN, word-break: break-word has the same behaviour as overflow-wrap: anywhere. Whereas the refactored change changed it to overflow-wrap: break-word

I'm reading and likely seems related to this behaviour from overflow-wrap: break-word:

... soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.

Introduced in

Expected behavior
Not overflowing when long text inputs are provided

Is this issue blocking you?
Will introduce a CSS override, not blocking. Our override:

.pf-v6-c-clipboard-copy__expandable-content,
.pf-v6-c-clipboard-copy__text,
.pf-v6-c-menu__item-description,
.pf-v6-c-modal-box__body,
.pf-v6-c-notification-drawer__list-item-header-title,
.pf-v6-c-notification-drawer__list-item-description,
.pf-v6-c-notification-drawer__group-toggle-title,
.pf-v6-c-popover__body,
.pf-v6-c-progress__description,
.pf-v6-c-progress__status,
.pf-v6-c-title,
.pf-v6-c-tooltip__content,
.pf-v6-c-wizard__title,
.pf-v6-c-wizard__toggle-list-item,
.pf-v6-c-wizard__nav-link,
.pf-v6-c-wizard__main {
  overflow-wrap: anywhere;
}

Screenshots
Left browser is reference, right browser is the PF 6.6.0 bump

image

What is your product and what release date are you targeting?
Cockpit 365, July 15

Any other information?


Jira Issue: PF-4396

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions