fix: overflow with long words (#1215)

This PR aims to solve this problem globally rather than just in the 1
instance spotted as I suspect this is happen frequently with
translations.

- Add `hyphen: auto` globally (with exceptions)
- Progresively enchance with `hyphen-limit-chars` to avoid over hyphenating (https://developer.mozilla.org/en-US/docs/Web/CSS/hyphenate-limit-chars) 
- Soft hyphens `\u00AD` can be used by the translation team to encourage preferred hyphenations
(https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens)
- Excludes elements that commonly avoid hyphenation (https://meyerweb.com/eric/thoughts/2012/12/17/where-to-avoid-css-hyphenation/)

Author: maxelkins

CHANGELOG.md

@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Styling issue on status bar on mobile (#1217)
 - Change tab `block-size` to `min-block-size` to allow for height increase when text wraps (#1219)
 - Changed `SkulptRunner.jsx` implementation of hiding elements to use `display: none` rather than `block-size: 0` (#1219)
+- Enabled `hyphens: auto` globally (with exceptions) to prevent overflow with longer words (#1215)
 
 ## [0.30.1] - 2025-06-09
 

src/assets/stylesheets/InternalStyles.scss

@@ -58,10 +58,28 @@
   display: flex;
   flex-flow: column;
   block-size: 100%;
+  hyphens: auto;
+  hyphenate-limit-chars: 10 4 4; // Minimum of 10 characters before hyphenating, minimum of 4 character before and after the hyphen.
 
   .proj {
     min-block-size: 100%;
   }
+
+  code,
+  var,
+  kbd,
+  samp,
+  tt,
+  dir,
+  listing,
+  plaintext,
+  xmp,
+  abbr,
+  acronym,
+  blockquote,
+  q {
+    hyphens: none;
+  }
 }
 
 code {
@@ -91,7 +109,6 @@ button:focus-visible {
   }
 }
 
-
 .--light {
   --editor-color-layer-1: #{$rpf-teal-100};
   --editor-color-layer-2: #{$rpf-white};
@@ -120,5 +137,6 @@ button:focus-visible {
   --editor-color-tab-background: #{$rpf-grey-700};
 
   .rpf-button--secondary {
-    border-color: $rpf-navy-800;}
+    border-color: $rpf-navy-800;
+  }
 }