diff --git a/public/css/Fhc.css b/public/css/Fhc.css
index 9342be5a3..7a209b661 100644
--- a/public/css/Fhc.css
+++ b/public/css/Fhc.css
@@ -1,6 +1,21 @@
-.text-prewrap {
+.fhc-alert.p-toast-center {
+  width: 35rem;
+  max-width: 100vw;
+}
+.fhc-alert.p-toast-top-right {
+  max-width: calc(100vw - 40px);
+}
+.fhc-alert.p-toast-top-right .p-toast-detail,
+.fhc-alert.p-toast-center .p-toast-message-text .card {
+  white-space: pre-wrap;
+}
+
+.text-preline {
   white-space: pre-line;
 }
+.text-prewrap {
+  white-space: pre-wrap;
+}
 
 .btn-p-0 {
   padding: 0 .375rem;
diff --git a/public/js/plugin/FhcAlert.js b/public/js/plugin/FhcAlert.js
index 079039aed..cb9c4c4e8 100644
--- a/public/js/plugin/FhcAlert.js
+++ b/public/js/plugin/FhcAlert.js
@@ -133,8 +133,8 @@ const helperApp = Vue.createApp({
 		helperAppContainer.parentElement.removeChild(helperAppContainer);
 	},
 	template: `
-	<pv-toast ref="toast" base-z-index="99999"></pv-toast>
-	<pv-toast ref="alert" base-z-index="99999" position="center">
+	<pv-toast ref="toast" class="fhc-alert" :base-z-index="99999"></pv-toast>
+	<pv-toast ref="alert" class="fhc-alert" :base-z-index="99999" position="center">
 		<template #message="slotProps">
 			<i class="fa fa-circle-exclamation fa-2xl mt-3"></i>
 			<div class="p-toast-message-text">
@@ -161,7 +161,7 @@ const helperApp = Vue.createApp({
 					</a>
 				</div>
 				<div ref="messageCard" :id="'fhcAlertCollapseMessageCard' + slotProps.message.id" class="collapse mt-3">
-					<div class="card card-body text-body small" style="white-space: pre-wrap">
+					<div class="card card-body text-body small">
 						{{slotProps.message.detail}}
 					</div>
 				</div>