From 72a4677998863c6674d91a81e5e23bc74c3cd9b4 Mon Sep 17 00:00:00 2001 From: Lea Date: Mon, 2 Dec 2024 08:48:13 +0100 Subject: [PATCH] fix(styles): stepper step display to break words when too long (#4055) --- .changeset/rude-needles-matter.md | 5 +++++ packages/styles/src/components/stepper.scss | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/rude-needles-matter.md diff --git a/.changeset/rude-needles-matter.md b/.changeset/rude-needles-matter.md new file mode 100644 index 0000000000..3a89619dff --- /dev/null +++ b/.changeset/rude-needles-matter.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': patch +--- + +Fixed display of stepper to break words when text is too long to fit in one line. diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss index 53159b2d6c..deaf653401 100644 --- a/packages/styles/src/components/stepper.scss +++ b/packages/styles/src/components/stepper.scss @@ -96,6 +96,7 @@ color: stepper.$stepper-link-color; width: fit-content; line-height: stepper.$stepper-link-line-height; + word-break: break-word; // not adding ellipsis if the like doesn't have a title for accessibility reasons &:not([title]) {