Type Effect Fix

Author: sid-devspot

docs/assets/prop.scss

@@ -155,20 +155,22 @@ app-root,
 }
 
 .type-effect {
-  max-width: fit-content;
   display: inline-block;
   overflow: hidden;
   border-right: 0.15em solid var(--theme-colour);
-  white-space: normal;
-  animation: typing 4s steps(40, end), blink-caret 0.75s step-end infinite;
+  white-space: nowrap;
+  animation: typing 3s steps(30, end), blink-caret 0.75s step-end infinite;
+  max-width: fit-content;
+  box-sizing: border-box;
 }
 
+/* Animate up to the full content */
 @keyframes typing {
   from {
-    width: 0ch;
+    width: 0;
   }
   to {
-    width: 40ch;
+    width: 100%;
   }
 }
 

docs/index.html

@@ -155,20 +155,22 @@ app-root,
 }
 
 .type-effect {
-  max-width: fit-content;
   display: inline-block;
   overflow: hidden;
   border-right: 0.15em solid var(--theme-colour);
-  white-space: normal;
-  animation: typing 4s steps(40, end), blink-caret 0.75s step-end infinite;
+  white-space: nowrap;
+  animation: typing 3s steps(30, end), blink-caret 0.75s step-end infinite;
+  max-width: fit-content;
+  box-sizing: border-box;
 }
 
+/* Animate up to the full content */
 @keyframes typing {
   from {
-    width: 0ch;
+    width: 0;
   }
   to {
-    width: 40ch;
+    width: 100%;
   }
 }