feat(styles): add word break to step title EBS-1217 (#210)

Co-authored-by: Mihkel.Paloots <[email protected]>
e-gov · Nov 15, 2023 · 4639601 · 4639601
1 parent 258d11b
commit 4639601
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git 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
@@ -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>