From 3f67298130a320a3b41cb55e74dc9e8bda016863 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Mon, 26 May 2025 08:25:34 +0200
Subject: [PATCH] Energyflow: align text/icons (#21450)

---
 .../components/Energyflow/Energyflow.stories.ts  |  7 +++++++
 assets/js/components/Energyflow/Energyflow.vue   |  4 ++--
 assets/js/components/Energyflow/Entry.vue        | 16 +++++++++-------
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/assets/js/components/Energyflow/Energyflow.stories.ts b/assets/js/components/Energyflow/Energyflow.stories.ts
index a56640aee..21a25db63 100644
--- a/assets/js/components/Energyflow/Energyflow.stories.ts
+++ b/assets/js/components/Energyflow/Energyflow.stories.ts
@@ -56,6 +56,13 @@ GridAndPV.args = {
 	smartCostType: "price",
 	currency: CURRENCY.EUR,
 	pv: [{ power: 5000 }, { power: 2300 }],
+	forecast: {
+		solar: {
+			today: { energy: 1000, complete: true },
+			tomorrow: { energy: 1000, complete: false },
+			dayAfterTomorrow: { energy: 1000, complete: false },
+		},
+	},
 };
 
 export const BatteryAndGrid = Template.bind({});
diff --git a/assets/js/components/Energyflow/Energyflow.vue b/assets/js/components/Energyflow/Energyflow.vue
index da7e7ce1c..29422e63c 100644
--- a/assets/js/components/Energyflow/Energyflow.vue
+++ b/assets/js/components/Energyflow/Energyflow.vue
@@ -70,7 +70,7 @@
 				<div
 					class="col-12 col-md-6 pe-md-5 pb-4 d-flex flex-column justify-content-between"
 				>
-					<div class="d-flex justify-content-between align-items-end mb-4">
+					<div class="d-flex justify-content-between align-items-baseline mb-4">
 						<h3 class="m-0">In</h3>
 						<span v-if="pvPossible" class="fw-bold">
 							<AnimatedNumber :to="inPower" :format="kw" />
@@ -154,7 +154,7 @@
 				<div
 					class="col-12 col-md-6 ps-md-5 pb-4 d-flex flex-column justify-content-between"
 				>
-					<div class="d-flex justify-content-between align-items-end mb-4">
+					<div class="d-flex justify-content-between align-items-baseline mb-4">
 						<h3 class="m-0">Out</h3>
 						<span v-if="pvPossible" class="fw-bold">
 							<AnimatedNumber :to="outPower" :format="kw" />
diff --git a/assets/js/components/Energyflow/Entry.vue b/assets/js/components/Energyflow/Entry.vue
index 326ca5351..cbcb50799 100644
--- a/assets/js/components/Energyflow/Entry.vue
+++ b/assets/js/components/Energyflow/Entry.vue
@@ -8,16 +8,18 @@
 					<div v-else-if="!icon" class="icon-placeholder"></div>
 					<component :is="`shopicon-regular-${icon}`" v-else></component>
 				</span>
-				<div class="d-block flex-grow-1 ms-3 text-truncate">
-					<span v-if="!$slots['expanded']">{{ name }}</span>
+				<div class="d-flex flex-grow-1 ms-3 align-items-center text-truncate">
+					<span v-if="!$slots['expanded']" class="text-truncate">
+						{{ name }}
+					</span>
 					<button
 						v-else
-						class="btn-neutral d-flex align-items-baseline flex-shrink-1 flex-grow-1"
+						class="btn-neutral d-flex align-items-center flex-shrink-1 flex-grow-1"
 						style="max-width: 100%"
 						@click="toggle"
 					>
-						<div class="text-truncate flex-shrink-1 flex-grow-0">
-							{{ name }}
+						<div class="flex-shrink-1 flex-grow-0 d-flex text-truncate">
+							<span class="text-truncate"> {{ name }} </span>
 						</div>
 						<shopicon-regular-arrowdropdown
 							class="expand-icon flex-shrink-0 flex-grow-0"
@@ -25,10 +27,10 @@
 						/>
 					</button>
 				</div>
-				<span class="text-end text-nowrap ps-1 fw-bold d-flex">
+				<span class="text-end text-nowrap ps-1 fw-bold d-flex align-items-center">
 					<div
 						ref="details"
-						class="fw-normal"
+						class="fw-normal d-flex align-items-center"
 						:class="{
 							'text-decoration-underline': detailsClickable,
 							'evcc-gray': detailsInactive,