From 6c29bc5db001e75f5ca06fec726369b87d007a03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tristan=20Dani=C3=ABl=20Maat?= <tm@tlater.net>
Date: Mon, 10 Oct 2022 12:47:31 +0100
Subject: [PATCH] templates: Fix awkward typed title wrapping on phones

Fixes #19
---
 templates/src/lib/scss/_typed.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/templates/src/lib/scss/_typed.scss b/templates/src/lib/scss/_typed.scss
index a77a758..6b7b69b 100644
--- a/templates/src/lib/scss/_typed.scss
+++ b/templates/src/lib/scss/_typed.scss
@@ -10,11 +10,11 @@
   $iterations: math.ceil(math.div($duration, 1s)) * 2;
 
   animation: $name ease-in-out 500ms $iterations alternate;
-  content: " ";
+  content: " ";
 
   @keyframes #{$name} {
     from {
-      content: " ";
+      content: " ";
     }
 
     to {
@@ -25,6 +25,8 @@
 
 /// Animate a piece of text as if it was being typed by a human.
 @mixin typed($text, $duration) {
+  word-break: break-all;
+
   // We don't want a linearly typed set of text, which makes this
   // singificantly more complex.
   //