From c166a68744ecfbfa16be668ea74cdebec1cffe5b Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Sun, 5 Feb 2023 12:08:21 +0100
Subject: [PATCH] Truncate long loadpoints names (#6062)

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

diff --git a/assets/js/components/Loadpoint.story.vue b/assets/js/components/Loadpoint.story.vue
index 321832288..3a6ed68b3 100644
--- a/assets/js/components/Loadpoint.story.vue
+++ b/assets/js/components/Loadpoint.story.vue
@@ -42,9 +42,10 @@ const state = reactive({
 				:chargeCurrent="0"
 			/>
 		</Variant>
-		<Variant title="disabled">
+		<Variant title="disabled, long title">
 			<Loadpoint
 				v-bind="state"
+				title="Charging point with a very very very long title!!!1!"
 				remoteDisabled="soft"
 				remoteDisabledSource="Sunny Home Manager"
 				mode="now"
diff --git a/assets/js/components/Loadpoint.vue b/assets/js/components/Loadpoint.vue
index 40f2351ff..61da4ac00 100644
--- a/assets/js/components/Loadpoint.vue
+++ b/assets/js/components/Loadpoint.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="loadpoint pt-4 pb-2 px-3 px-sm-4 mx-2 mx-sm-0">
 		<div class="d-block d-sm-flex justify-content-between align-items-center mb-3">
-			<div class="d-flex justify-content-between align-items-center mb-3">
+			<div class="d-flex justify-content-between align-items-center mb-3 text-truncate">
 				<h3 class="me-2 mb-0 text-truncate">
 					{{ title || $t("main.loadpoint.fallbackName") }}
 				</h3>