fix(modal): break text in modal title

baloise · Jan 20, 2022 · f7ccd46 · f7ccd46
1 parent 21be436
commit f7ccd46
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/packages/components/src/components/notice/bal-modal/bal-modal-header/bal-modal-header.tsx b/packages/components/src/components/notice/bal-modal/bal-modal-header/bal-modal-header.tsx
@@ -21,9 +21,11 @@ export class ModalHeader {
   render() {
     return (
       <Host class="modal-card-head">
-        <h3 class="modal-card-title title is-size-3 has-text-blue m-0">
-          <slot></slot>
-        </h3>
+        <div>
+          <h4 class="modal-card-title title is-size-4 has-text-blue m-0">
+            <slot></slot>
+          </h4>
+        </div>
         <button
           class={{
             'modal-close': true,

diff --git a/packages/components/src/components/notice/bal-modal/bal-modal.scss b/packages/components/src/components/notice/bal-modal/bal-modal.scss
@@ -12,8 +12,13 @@ bal-modal-header {
   border-radius: $radius-large !important;
   background-color: transparent !important;
 
+  .modal-card-head {
+    word-break: break-word;
+  }
+
   .modal-card-title {
     padding-right: 40px;
+    line-height: 32px;
   }
 
   .modal-close {