From c35eaca334dade8822e6303952d1579244ed6f1d Mon Sep 17 00:00:00 2001
From: Maschga <88616799+Maschga@users.noreply.github.com>
Date: Thu, 5 Sep 2024 22:30:38 +0200
Subject: [PATCH] prevent screen from juddering when clicking on diagram
 (#15815)

---
 assets/css/app.css               |  4 ++++
 assets/js/components/Footer.vue  |  2 --
 assets/js/components/Version.vue | 16 +++++++++-------
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 4c7a52653..b0ee0b571 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -112,6 +112,10 @@ body {
 	color: var(--evcc-default-text);
 }
 
+body:not(.modal-open) {
+	overflow-y: scroll;
+}
+
 h1,
 h2,
 h3,
diff --git a/assets/js/components/Footer.vue b/assets/js/components/Footer.vue
index 9d4168bfe..f62e17d60 100644
--- a/assets/js/components/Footer.vue
+++ b/assets/js/components/Footer.vue
@@ -24,5 +24,3 @@ export default {
 	},
 };
 </script>
-
-<style scoped></style>
diff --git a/assets/js/components/Version.vue b/assets/js/components/Version.vue
index e08302719..1872dc372 100644
--- a/assets/js/components/Version.vue
+++ b/assets/js/components/Version.vue
@@ -1,14 +1,16 @@
 <template>
-	<div>
+	<div class="text-truncate">
 		<a
 			v-if="commit"
 			:href="githubHashUrl"
 			target="_blank"
 			class="btn btn-link ps-0 text-decoration-none evcc-default-text text-nowrap d-flex align-items-end"
 		>
-			<Logo class="logo me-2" />
-			<span class="text-decoration-underline">v{{ installed }}</span>
-			<shopicon-regular-moonstars class="ms-2 text-gray-light"></shopicon-regular-moonstars>
+			<Logo class="logo me-2 flex-shrink-0" />
+			<span class="text-decoration-underline text-truncate">v{{ installed }}</span>
+			<shopicon-regular-moonstars
+				class="ms-2 text-gray-light flex-shrink-0"
+			></shopicon-regular-moonstars>
 		</a>
 		<button
 			v-else-if="newVersionAvailable"
@@ -17,7 +19,7 @@
 			@click="openModal"
 		>
 			<shopicon-regular-gift class="me-2"></shopicon-regular-gift>
-			<span class="text-decoration-underline">v{{ installed }}</span>
+			<span class="text-decoration-underline text-truncate">v{{ installed }}</span>
 			<span class="ms-2 d-none d-sm-block text-gray-medium text-decoration-underline">
 				{{ $t("footer.version.availableLong") }}
 			</span>
@@ -28,8 +30,8 @@
 			target="_blank"
 			class="btn btn-link evcc-default-text ps-0 text-decoration-none text-nowrap d-flex align-items-end"
 		>
-			<Logo class="logo me-2" />
-			<span class="text-decoration-underline">v{{ installed }}</span>
+			<Logo class="logo me-2 flex-shrink-0" />
+			<span class="text-decoration-underline text-truncate">v{{ installed }}</span>
 		</a>
 
 		<Teleport to="body">