From e85475b4e0ed1aee8bb65aec9457be582ac7653a Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Mon, 27 Jan 2025 21:48:33 +0100
Subject: [PATCH] UI: wrap long errors (#18458)

---
 assets/js/components/OfflineIndicator.story.vue | 13 ++++++++++++-
 assets/js/components/OfflineIndicator.vue       |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/assets/js/components/OfflineIndicator.story.vue b/assets/js/components/OfflineIndicator.story.vue
index d445b1ef7..d3b5bef2c 100644
--- a/assets/js/components/OfflineIndicator.story.vue
+++ b/assets/js/components/OfflineIndicator.story.vue
@@ -4,6 +4,17 @@ import OfflineIndicator from "./OfflineIndicator.vue";
 
 <template>
 	<Story>
-		<OfflineIndicator />
+		<Variant title="offline">
+			<OfflineIndicator offline />
+		</Variant>
+		<Variant title="fatal">
+			<OfflineIndicator
+				:fatal="{
+					error: `cannot create charger 'wallbox_cphl': cannot create charger type 'template': cannot create
+charger type 'hardybarth-ecbl: Post http://192.168.2.219/api/v1/chargecontrols/1/mode: context deadline exceeded (Client.Timeout
+exceeded while awaiting headers)`,
+				}"
+			/>
+		</Variant>
 	</Story>
 </template>
diff --git a/assets/js/components/OfflineIndicator.vue b/assets/js/components/OfflineIndicator.vue
index e776eb3f4..96316047f 100644
--- a/assets/js/components/OfflineIndicator.vue
+++ b/assets/js/components/OfflineIndicator.vue
@@ -56,7 +56,7 @@
 							{{ $t("offline.configurationError") }}
 						</strong>
 					</div>
-					<div v-if="fatal">{{ fatal.error }}</div>
+					<div v-if="fatal" class="text-break">{{ fatal.error }}</div>
 				</div>
 				<button
 					type="button"