Merge pull request #1806 from SpareBank1/develop_overflow-wrap

fix(ffe-form): overflow-wrap: anywhere radio/checkboxes
SpareBank1 · Feb 26, 2024 · c5c5dc0 · c5c5dc0
2 parents 1546dff + c0e1bd4
commit c5c5dc0
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 7 deletions.
diff --git a/packages/ffe-form/less/checkbox.less b/packages/ffe-form/less/checkbox.less
@@ -16,11 +16,8 @@
     color: var(--ffe-v-input-color);
     grid-template-columns: auto 1fr;
     grid-template-rows: var(--line-height) 1fr;
-
-    .ffe-checkbox__content {
-        grid-column: 2/3;
-        grid-row: 1/-1;
-    }
+    overflow-wrap: anywhere;
+    hyphens: auto;
 
     &--no-margin {
         margin-top: 0;
@@ -68,6 +65,11 @@
     }
 }
 
+.ffe-checkbox__content {
+    grid-column: 2/3;
+    grid-row: 1/-1;
+}
+
 .ffe-hidden-checkbox {
     position: absolute;
     opacity: 0;

diff --git a/packages/ffe-form/less/radio-block.less b/packages/ffe-form/less/radio-block.less
@@ -9,6 +9,8 @@
     margin-top: @ffe-spacing-md;
     width: 100%;
     transition: width @ffe-transition-duration @ffe-ease-in-out-back;
+    overflow-wrap: anywhere;
+    hyphens: auto;
 
     &__content,
     &__header {
@@ -56,7 +58,7 @@
 
     &__wrapper {
         grid-column: 2/3;
-        grid-row: 2/2;
+        grid-row: 2/3;
         padding: @ffe-spacing-sm @ffe-spacing-sm @ffe-spacing-lg;
         cursor: auto;
 

diff --git a/packages/ffe-form/less/radio-button.less b/packages/ffe-form/less/radio-button.less
@@ -2,7 +2,7 @@
     --line-height: 1.15rem;
 
     line-height: var(--line-height);
-    word-break: break-all;
+    overflow-wrap: anywhere;
     hyphens: auto;
     font-family: var(--ffe-g-font);
     font-variant-numeric: tabular-nums;

diff --git a/packages/ffe-form/less/radio-switch.less b/packages/ffe-form/less/radio-switch.less
@@ -19,6 +19,8 @@
     margin-bottom: @ffe-spacing-2xs;
     margin-top: @ffe-spacing-sm;
     line-height: 1.5;
+    overflow-wrap: anywhere;
+    hyphens: auto;
 
     &::before {
         content: '';

diff --git a/packages/ffe-form/less/tooltip.less b/packages/ffe-form/less/tooltip.less
@@ -45,6 +45,8 @@
         overflow: hidden;
         visibility: hidden;
         transition: height @ffe-transition-duration @ffe-ease;
+        overflow-wrap: anywhere;
+        hyphens: auto;
     }
 
     &--open &__text {