From 6115c082587bc6836130d6e2a7be62a1cfa9fc25 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Mon, 30 Mar 2026 17:46:26 +0200
Subject: [PATCH] Forecast UI: no savings-modal rerender, fixed safari scroll
 overlays (#28660)

---
 assets/css/app.css                           | 4 ++--
 assets/js/components/Forecast/Co2Chart.vue   | 2 +-
 assets/js/components/Forecast/PriceChart.vue | 2 +-
 assets/js/components/Forecast/SolarChart.vue | 2 +-
 assets/js/components/Tariff/TariffChart.vue  | 2 +-
 assets/js/views/Forecast.vue                 | 3 +--
 i18n/de.json                                 | 3 +--
 i18n/en.json                                 | 3 +--
 i18n/fi.json                                 | 3 +--
 i18n/lt.json                                 | 3 +--
 tests/bottom-nav.spec.ts                     | 2 +-
 11 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 85383ce66..992b23c68 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -462,8 +462,8 @@ html:has(.modal.show) {
 }
 
 /* Safari renders non-overlay scrollbars above modal backdrops at compositor level */
-body.modal-open .forecast-chart-scroll::-webkit-scrollbar {
-	opacity: 0;
+body.modal-open .scroll-overlay-fix {
+	scrollbar-color: transparent transparent;
 }
 
 .cursor-pointer {
diff --git a/assets/js/components/Forecast/Co2Chart.vue b/assets/js/components/Forecast/Co2Chart.vue
index 3d48cb1f1..438098327 100644
--- a/assets/js/components/Forecast/Co2Chart.vue
+++ b/assets/js/components/Forecast/Co2Chart.vue
@@ -1,5 +1,5 @@
 <template>
-	<div ref="scrollEl" class="forecast-chart-scroll" @scroll="onScroll">
+	<div ref="scrollEl" class="forecast-chart-scroll scroll-overlay-fix" @scroll="onScroll">
 		<div ref="chartEl" :style="{ height: '200px', width: chartWidth + 'px' }"></div>
 	</div>
 </template>
diff --git a/assets/js/components/Forecast/PriceChart.vue b/assets/js/components/Forecast/PriceChart.vue
index c792459bf..14a99622e 100644
--- a/assets/js/components/Forecast/PriceChart.vue
+++ b/assets/js/components/Forecast/PriceChart.vue
@@ -1,5 +1,5 @@
 <template>
-	<div ref="scrollEl" class="forecast-chart-scroll" @scroll="onScroll">
+	<div ref="scrollEl" class="forecast-chart-scroll scroll-overlay-fix" @scroll="onScroll">
 		<div ref="chartEl" :style="{ height: '200px', width: chartWidth + 'px' }"></div>
 	</div>
 </template>
diff --git a/assets/js/components/Forecast/SolarChart.vue b/assets/js/components/Forecast/SolarChart.vue
index 3e007ccb0..bd13a76d9 100644
--- a/assets/js/components/Forecast/SolarChart.vue
+++ b/assets/js/components/Forecast/SolarChart.vue
@@ -1,5 +1,5 @@
 <template>
-	<div ref="scrollEl" class="forecast-chart-scroll" @scroll="onScroll">
+	<div ref="scrollEl" class="forecast-chart-scroll scroll-overlay-fix" @scroll="onScroll">
 		<div ref="chartEl" :style="{ height: '200px', width: chartWidth + 'px' }"></div>
 	</div>
 </template>
diff --git a/assets/js/components/Tariff/TariffChart.vue b/assets/js/components/Tariff/TariffChart.vue
index 02eb86fe2..edf39739f 100644
--- a/assets/js/components/Tariff/TariffChart.vue
+++ b/assets/js/components/Tariff/TariffChart.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="root position-relative">
 		<div
-			class="chart position-relative"
+			class="chart scroll-overlay-fix position-relative"
 			:class="{ 'chart--with-target': targetText, inactive }"
 		>
 			<div
diff --git a/assets/js/views/Forecast.vue b/assets/js/views/Forecast.vue
index 4ed3af809..65d4f6d65 100644
--- a/assets/js/views/Forecast.vue
+++ b/assets/js/views/Forecast.vue
@@ -3,10 +3,9 @@
 		class="container px-4 safe-area-inset d-flex flex-column"
 		:class="{ 'empty-container': !forecastAvailable }"
 	>
-		<TopHeader v-if="forecastAvailable" :title="$t('forecast.modalTitle')" />
+		<TopHeader :title="$t('forecast.modalTitle')" />
 		<div v-if="!forecastAvailable" class="flex-grow-1 d-flex">
 			<div class="empty-box d-flex flex-column p-5">
-				<h2 class="fs-4 mb-4">{{ $t("forecast.empty.title") }}</h2>
 				<ul class="list-unstyled mb-4">
 					<li class="d-flex align-items-start gap-2 mb-3">
 						<shopicon-regular-sun
diff --git a/i18n/de.json b/i18n/de.json
index 79fdba52b..844c0de65 100644
--- a/i18n/de.json
+++ b/i18n/de.json
@@ -929,8 +929,7 @@
       "co2": "Erfahre, wann Netzstrom in deiner Region sauber ist. Ladepläne werden auf niedrige Emissionen optimiert und CO₂-Einsparungen berechnet.",
       "price": "Dynamischen Stromtarif konfigurieren, um Ladepläne automatisch zu optimieren und Einsparungen zu berechnen.",
       "setup": "Tarife und Vorhersagen einrichten",
-      "solar": "Erwartete Solarproduktion für heute und die nächsten Tage. Wird in Zukunft auch für die automatische Ladeoptimierung verwendet.",
-      "title": "Tarife & Vorhersagen"
+      "solar": "Erwartete Solarproduktion für heute und die nächsten Tage. Wird in Zukunft auch für die automatische Ladeoptimierung verwendet."
     },
     "modalTitle": "Vorhersage",
     "price": {
diff --git a/i18n/en.json b/i18n/en.json
index 9dcf9352c..bfd017351 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -930,8 +930,7 @@
       "co2": "See when grid energy in your region is clean. Charging plans will optimize for low emissions and calculate CO₂ savings.",
       "price": "Configure your dynamic electricity tariff to automatically optimize charging plans and calculate savings.",
       "setup": "Set up tariffs and forecasts",
-      "solar": "See expected solar production for today and the coming days. Will also be used for automatic charging optimization in the future.",
-      "title": "Tariffs & Forecasts"
+      "solar": "See expected solar production for today and the coming days. Will also be used for automatic charging optimization in the future."
     },
     "modalTitle": "Forecast",
     "price": {
diff --git a/i18n/fi.json b/i18n/fi.json
index 261b2da0e..dc602412f 100644
--- a/i18n/fi.json
+++ b/i18n/fi.json
@@ -937,8 +937,7 @@
       "co2": "Näytä milloin sähköverkon energia on puhdasta. Lataussuunnitelmissa optimoidaan alhaiset päästöt ja laskelmoidut CO₂-säästöt.",
       "price": "Määritä vaihteleva energian hintasi optimoidaksesi automaattisesti lataussuunnitelmasi ja laskeaksesi käytetyn energian kustannukset.",
       "setup": "Määritä hinnat ja ennusteet",
-      "solar": "Katso aurinkotuotannon ennuste täksi ja tuleviksi päiviksi. Käytetään tulevaisuudessa myös latauksien optimoitiin.",
-      "title": "Hinnat & ennusteet"
+      "solar": "Katso aurinkotuotannon ennuste täksi ja tuleviksi päiviksi. Käytetään tulevaisuudessa myös latauksien optimoitiin."
     },
     "modalTitle": "Ennuste",
     "price": {
diff --git a/i18n/lt.json b/i18n/lt.json
index b8f8d07bd..674207c0f 100644
--- a/i18n/lt.json
+++ b/i18n/lt.json
@@ -938,8 +938,7 @@
       "co2": "Sužinokite, kada jūsų regione energija yra mažiausiai tarši. Įkrovimo planai bus optimizuoti mažiausiam išmetamųjų teršalų kiekiui, apskaičiuosime CO₂ sutaupymą.",
       "price": "Sukonfigūruokite dinaminį elektros energijos tarifą, kad automatiškai optimizuotumėte įkrovimo planus ir apskaičiuotumėte sutaupytas lėšas.",
       "setup": "Sukonfigūruoti tarifus ir prognozes",
-      "solar": "Prognozuojama saulės energijos gamyba šiandienai ir ateinančiomis dienomis. Ateityje taip pat bus naudojama automatiniam įkrovimo optimizavimui.",
-      "title": "Tarifai ir Prognozės"
+      "solar": "Prognozuojama saulės energijos gamyba šiandienai ir ateinančiomis dienomis. Ateityje taip pat bus naudojama automatiniam įkrovimo optimizavimui."
     },
     "modalTitle": "Prognozė",
     "price": {
diff --git a/tests/bottom-nav.spec.ts b/tests/bottom-nav.spec.ts
index 6e6441210..f330d8e61 100644
--- a/tests/bottom-nav.spec.ts
+++ b/tests/bottom-nav.spec.ts
@@ -73,7 +73,7 @@ test.describe("bottom navigation", async () => {
     await expect(page.getByRole("heading", { name: "Home Battery" })).toBeVisible();
 
     await tabForecast.click();
-    await expect(page.getByRole("heading", { name: "Tariffs & Forecasts" })).toBeVisible();
+    await expect(page.getByRole("heading", { name: "Forecast" })).toBeVisible();
 
     await tabSessions.click();
     await expect(page.getByRole("heading", { name: "Sessions" })).toBeVisible();