From 9913b74e168e1934505d20fcf23b73c1c3ee2bcf Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Fri, 27 Dec 2024 15:56:41 +0100
Subject: [PATCH] feat: enable hypenation for the Root component

---
 .changeset/twelve-carrots-stare.md | 5 +++++
 components/root/src/_mixin.scss    | 6 ++++++
 2 files changed, 11 insertions(+)
 create mode 100644 .changeset/twelve-carrots-stare.md

diff --git a/.changeset/twelve-carrots-stare.md b/.changeset/twelve-carrots-stare.md
new file mode 100644
index 00000000000..ccb181a6623
--- /dev/null
+++ 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
index c8c0d4588d8..19d01e529ef 100644
--- a/components/root/src/_mixin.scss
+++ b/components/root/src/_mixin.scss
@@ -21,6 +21,7 @@
    * - 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;
 
@@ -28,6 +29,10 @@
   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;
 }