feat: enable hypenation for the Root component

nl-design-system · Dec 27, 2024 · 4c37eb9 · 4c37eb9
1 parent 3becef6
commit 4c37eb9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/.changeset/twelve-carrots-stare.md b/.changeset/twelve-carrots-stare.md
@@ -0,0 +1,5 @@
+---
+"@utrecht/root-css": patch
+---
+
+Enable hypenation for the Root component.
diff --git a/components/root/src/_mixin.scss b/components/root/src/_mixin.scss
@@ -21,13 +21,18 @@
    * - the root must be a "positioned ancestor", so elements that are positioned
    *   outside the normal document flow (`absolute`, `fixed` and `sticky`)
    *   are positioned relative to the root component.
+   * - ensure text content fits at 400% zoom by enabling hypenation.
    */
   @include reset-font-smoothing;
 
   background-color: var(--utrecht-root-background-color);
   block-size: 100%;
   color: var(--utrecht-root-color);
   font-family: var(--utrecht-root-font-family);
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
   inline-size: 100%;
   overflow-block: auto;
   overflow-inline: auto;
@@ -36,4 +41,5 @@
   -moz-text-size-adjust: none;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
+  word-break: break-word;
 }