From 6983d837a38d535a5fa6d618e6669bd4de61ede4 Mon Sep 17 00:00:00 2001
From: Nelson Ife <nelsonagada878@gmail.com>
Date: Fri, 14 Aug 2026 00:17:21 +0100
Subject: [PATCH] fix(web): wrap long log lines in terminal output

---
 src/components/ui/terminal.test.ts | 20 ++++++++++++++++++++
 src/components/ui/terminal.tsx     |  2 +-
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/terminal.test.ts

diff --git a/src/components/ui/terminal.test.ts b/src/components/ui/terminal.test.ts
new file mode 100644
index 0000000..21bdef6
--- /dev/null
+++ b/src/components/ui/terminal.test.ts
@@ -0,0 +1,20 @@
+import { createElement } from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { describe, expect, it } from "vitest"
+
+import { Terminal } from "./terminal"
+
+describe("Terminal", () => {
+  it("wraps long unbroken log lines instead of overflowing horizontally", () => {
+    const longLine = `ERR! ${"a".repeat(400)}`
+    const html = renderToStaticMarkup(
+      createElement(Terminal, { logs: ["> Running checks...", longLine] }),
+    )
+
+    expect(html).toContain(longLine)
+
+    const lineMarkup = html.slice(0, html.indexOf(longLine))
+    const openingTag = lineMarkup.slice(lineMarkup.lastIndexOf("<div"))
+    expect(openingTag).toContain("break-all")
+  })
+})
diff --git a/src/components/ui/terminal.tsx b/src/components/ui/terminal.tsx
index 8860cf7..314806d 100644
--- a/src/components/ui/terminal.tsx
+++ b/src/components/ui/terminal.tsx
@@ -60,7 +60,7 @@ const Terminal = React.forwardRef<HTMLDivElement, TerminalProps>(
             }
 
             return (
-              <div key={index} className={colorClass}>
+              <div key={index} className={cn(colorClass, "break-all")}>
                 {log}
               </div>
             );