From 6d4c931091ed815dbdb783f68cfa1f08c8501886 Mon Sep 17 00:00:00 2001
From: Eugene Fox <eugene@xfox111.net>
Date: Tue, 22 Jul 2025 14:50:28 +0000
Subject: [PATCH] chore(ui): pre-wrap for alert message

---
 app/_components/AlertMessage.module.scss | 5 +++++
 app/_components/AlertMessage.tsx         | 6 +++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/_components/AlertMessage.module.scss b/app/_components/AlertMessage.module.scss
index 19679be..da4af66 100644
--- a/app/_components/AlertMessage.module.scss
+++ b/app/_components/AlertMessage.module.scss
@@ -21,4 +21,9 @@
 	{
 		@include body1Stronger;
 	}
+
+	.message
+	{
+		white-space: pre-wrap;
+	}
 }
diff --git a/app/_components/AlertMessage.tsx b/app/_components/AlertMessage.tsx
index d78e754..d2c729f 100644
--- a/app/_components/AlertMessage.tsx
+++ b/app/_components/AlertMessage.tsx
@@ -26,15 +26,15 @@ const AlertMessage: React.FC = async () =>
 		if (!response.ok || !alertText)
 			return null;
 
-		const title: string = alertText.split("\n", 1)[0];
-		const message: string = alertText.substring(title.length);
+		const title: string = alertText.split("\n", 1)[0].trim();
+		const message: string = alertText.substring(title.length + 1).trim();
 
 		return (
 			<div role="alert" className={ cls.alertBox } aria-label={ alertText }>
 				<ChatWarningRegular className={ cls.icon } />
 				<div>
 					<p className={ cls.title }>{ title }</p>
-					<p dangerouslySetInnerHTML={ { __html: message } } />
+					<p className={ cls.message } dangerouslySetInnerHTML={ { __html: message } } />
 				</div>
 			</div>
 		);