Energyflow: align text/icons (#21450)

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({});

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" />

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,