UI: wrap long errors (#18458)

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>

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"