feat(web-host/Repl): word-break: break-word to avoid overflow-x on small devices

Author: topheman

packages/web-host/src/components/ReplHistory.tsx

@@ -19,15 +19,15 @@ export function ReplHistory({
         <div key={index}>
           {"stdin" in entry && entry.stdin && (
             <pre
-              className="bg-gray-50 whitespace-pre-wrap"
+              className="bg-gray-50 whitespace-pre-wrap word-break-word"
               data-stdtype="stdin"
             >
               {entry.stdin}
             </pre>
           )}
           {"stdout" in entry && entry.stdout && (
             <pre
-              className="bg-green-100 whitespace-pre-wrap before:content-[attr(data-status)] relative before:absolute before:right-0 before:top-0"
+              className="bg-green-100 whitespace-pre-wrap before:content-[attr(data-status)] relative before:absolute before:right-0 before:top-0 word-break-word"
               data-status={entry.status === "success" ? "✅" : "❌"}
               data-stdtype="stdout"
             >
@@ -36,7 +36,7 @@ export function ReplHistory({
           )}
           {"stderr" in entry && entry.stderr && (
             <pre
-              className="bg-red-100 whitespace-pre-wrap before:content-[attr(data-status)] relative before:absolute before:right-0 before:top-0"
+              className="bg-red-100 whitespace-pre-wrap before:content-[attr(data-status)] relative before:absolute before:right-0 before:top-0 word-break-word"
               data-status={entry.status === "success" ? "✅" : "❌"}
               data-stdtype="stderr"
             >

packages/web-host/src/index.css

@@ -66,6 +66,14 @@ button:focus-visible {
   }
 }
 
+@utility word-break-word {
+  word-break: break-word;
+}
+
+@utility word-break-all {
+  word-break: break-all;
+}
+
 @keyframes pulse110 {
   0%,
   100% {