From 4639601f8e99203c2e548ab3ab70dc0919c78321 Mon Sep 17 00:00:00 2001
From: MihkelPaloots <116970250+MihkelPaloots@users.noreply.github.com>
Date: Wed, 15 Nov 2023 20:51:42 +0200
Subject: [PATCH] feat(styles): add word break to step title EBS-1217 (#210)

Co-authored-by: Mihkel.Paloots <mihkel.paloots@nortal.com>
---
 libs/styles/src/lib/scss/components/_steps.scss        | 1 +
 libs/ui/src/lib/steps/steps/steps.component.stories.ts | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/libs/styles/src/lib/scss/components/_steps.scss b/libs/styles/src/lib/scss/components/_steps.scss
index 04183cec..14cb9c8e 100644
--- a/libs/styles/src/lib/scss/components/_steps.scss
+++ b/libs/styles/src/lib/scss/components/_steps.scss
@@ -170,6 +170,7 @@
     }
 
     #{$base}__list-item-title {
+      word-break: break-word;
       @include cvi-breakpoint-down(sm) {
         color: get-color(sapphire-blue-10);
         font-weight: get-font-weight(gamma);
diff --git a/libs/ui/src/lib/steps/steps/steps.component.stories.ts b/libs/ui/src/lib/steps/steps/steps.component.stories.ts
index 5701fc7b..d377ae1e 100644
--- a/libs/ui/src/lib/steps/steps/steps.component.stories.ts
+++ b/libs/ui/src/lib/steps/steps/steps.component.stories.ts
@@ -70,7 +70,7 @@ const Template: Story<StepsComponent> = (args: StepsComponent) => {
           </cvi-ng-step-panel>
         </cvi-ng-step>
         <cvi-ng-step dataAttribute="step_3">
-          <cvi-ng-step-panel title="Third">
+          <cvi-ng-step-panel title="VeryVeryVeryLongWordThatNeedsToBreakInOrderToFit">
             {{ stepsContent[2] }}
           </cvi-ng-step-panel>
         </cvi-ng-step>