From de29e57930518fca827e06d7bd7e7cd0a5c70c6b Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Fri, 31 Jul 2026 16:24:33 +0200
Subject: [PATCH] Sessions UI: fix grouped chart layout and legend styling
 (#32338)

---
 assets/js/colors.ts                                   | 3 +++
 assets/js/components/Sessions/AvgCostGroupedChart.vue | 6 +++---
 assets/js/components/Sessions/CostGroupedChart.vue    | 6 +++---
 assets/js/components/Sessions/EnergyGroupedChart.vue  | 6 +++---
 assets/js/components/Sessions/LegendList.vue          | 4 ++--
 assets/js/components/Sessions/SessionTable.vue        | 2 +-
 assets/js/components/Sessions/SolarGroupedChart.vue   | 6 +++---
 assets/js/components/Sessions/SolarYearChart.vue      | 2 +-
 assets/js/views/Sessions.vue                          | 6 +++---
 9 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/assets/js/colors.ts b/assets/js/colors.ts
index d9425d322..ffa039a14 100644
--- a/assets/js/colors.ts
+++ b/assets/js/colors.ts
@@ -27,6 +27,7 @@ const colors: {
   temperature: string | null;
   export: string | null;
   background: string | null;
+  box: string | null;
   light: string | null;
   selfPalette: string[];
   palette: string[];
@@ -44,6 +45,7 @@ const colors: {
   temperature: null,
   export: null,
   background: null,
+  box: null,
   light: null,
   selfPalette: ["#0FDE41", "#FFBD2F", "#FD6158", "#03C1EF", "#0F662D", "#FF922E"],
   palette: [
@@ -152,6 +154,7 @@ export function updateCssColors() {
   colors.temperature = style.getPropertyValue("--evcc-temperature");
   colors.export = style.getPropertyValue("--evcc-export-contrast");
   colors.background = style.getPropertyValue("--evcc-background");
+  colors.box = style.getPropertyValue("--evcc-box");
   colors.pricePerKWh = style.getPropertyValue("--bs-gray-medium");
   colors.co2PerKWh = style.getPropertyValue("--bs-gray-medium");
   colors.light = style.getPropertyValue("--bs-gray-light");
diff --git a/assets/js/components/Sessions/AvgCostGroupedChart.vue b/assets/js/components/Sessions/AvgCostGroupedChart.vue
index a62e8446f..814572f0c 100644
--- a/assets/js/components/Sessions/AvgCostGroupedChart.vue
+++ b/assets/js/components/Sessions/AvgCostGroupedChart.vue
@@ -1,9 +1,9 @@
 <template>
 	<div v-if="chartData.labels.length > 1" class="row">
-		<div class="col-12 col-md-6 mb-3">
+		<div class="col-12 col-md-6 col-lg-12 col-xxl-6 mb-3">
 			<PolarArea :data="chartData" :options="options" />
 		</div>
-		<div class="col-12 col-md-6 d-flex align-items-center py-0 py-md-3">
+		<div class="col-12 col-md-6 col-lg-12 col-xxl-6 d-flex align-items-center">
 			<LegendList :legends="legends" :device-colors="deviceColors" grid />
 		</div>
 	</div>
@@ -130,7 +130,7 @@ export default defineComponent({
 						beginAtZero: false,
 						ticks: {
 							color: colors.muted || "",
-							backdropColor: colors.background || "",
+							backdropColor: colors.box || "",
 							font: { size: 10 },
 							callback: this.formatValue,
 							maxTicksLimit: 6,
diff --git a/assets/js/components/Sessions/CostGroupedChart.vue b/assets/js/components/Sessions/CostGroupedChart.vue
index 2b36789b3..d96e43d34 100644
--- a/assets/js/components/Sessions/CostGroupedChart.vue
+++ b/assets/js/components/Sessions/CostGroupedChart.vue
@@ -1,9 +1,9 @@
 <template>
 	<div v-if="chartData.labels.length > 1" class="row">
-		<div class="col-12 col-md-6 mb-3">
+		<div class="col-12 col-md-6 col-lg-12 col-xxl-6 mb-3">
 			<Doughnut :data="chartData" :options="options" />
 		</div>
-		<div class="col-12 col-md-6 d-flex align-items-center">
+		<div class="col-12 col-md-6 col-lg-12 col-xxl-6 d-flex align-items-center">
 			<LegendList :legends="legends" :device-colors="deviceColors" grid />
 		</div>
 	</div>
@@ -94,7 +94,7 @@ export default defineComponent({
 				borderRadius: 10,
 				color: colors.text || "",
 				borderWidth: 3,
-				borderColor: colors.background || "",
+				borderColor: colors.box || "",
 				cutout: "70%",
 				radius: "95%",
 				animation: { duration: 250 },
diff --git a/assets/js/components/Sessions/EnergyGroupedChart.vue b/assets/js/components/Sessions/EnergyGroupedChart.vue
index dc1c3ff00..18c39eb21 100644
--- a/assets/js/components/Sessions/EnergyGroupedChart.vue
+++ b/assets/js/components/Sessions/EnergyGroupedChart.vue
@@ -1,9 +1,9 @@
 <template>
 	<div v-if="chartData.labels.length > 1" class="row">
-		<div class="col-12 col-md-6 mb-3">
+		<div class="col-12 col-md-6 col-lg-12 col-xxl-6 mb-3">
 			<Doughnut :data="chartData" :options="options" />
 		</div>
-		<div class="col-12 col-md-6 d-flex align-items-center">
+		<div class="col-12 col-md-6 col-lg-12 col-xxl-6 d-flex align-items-center">
 			<LegendList :legends="legends" :device-colors="deviceColors" grid />
 		</div>
 	</div>
@@ -107,7 +107,7 @@ export default defineComponent({
 				borderRadius: 10,
 				color: colors.text,
 				borderWidth: 3,
-				borderColor: colors.background,
+				borderColor: colors.box,
 				cutout: "70%",
 				radius: "95%",
 				animation: { duration: 250 },
diff --git a/assets/js/components/Sessions/LegendList.vue b/assets/js/components/Sessions/LegendList.vue
index b3359d5f8..d36fbe165 100644
--- a/assets/js/components/Sessions/LegendList.vue
+++ b/assets/js/components/Sessions/LegendList.vue
@@ -1,6 +1,6 @@
 <template>
 	<ul
-		class="root p-0 d-flex flex-wrap column-gap-4 row-gap-2"
+		class="root p-0 m-0 d-flex flex-wrap column-gap-4 row-gap-2"
 		:class="{
 			'root--small-equal-widths': smallEqualWidths,
 			'root--grid': grid,
@@ -50,7 +50,7 @@
 			<div
 				v-for="value in valueList(legend.value)"
 				:key="value"
-				class="text-muted text-nowrap legend-value text-end"
+				class="text-muted text-nowrap legend-value text-end tabular"
 			>
 				{{ value }}
 			</div>
diff --git a/assets/js/components/Sessions/SessionTable.vue b/assets/js/components/Sessions/SessionTable.vue
index ae72e7cc5..f9f1a16d3 100644
--- a/assets/js/components/Sessions/SessionTable.vue
+++ b/assets/js/components/Sessions/SessionTable.vue
@@ -174,7 +174,7 @@ const COLUMNS_PER_BREAKPOINT = {
 	sm: 3,
 	md: 4,
 	lg: 7,
-	xl: 8,
+	xl: 7,
 	xxl: 9,
 };
 
diff --git a/assets/js/components/Sessions/SolarGroupedChart.vue b/assets/js/components/Sessions/SolarGroupedChart.vue
index 484959ddf..ea1a8865e 100644
--- a/assets/js/components/Sessions/SolarGroupedChart.vue
+++ b/assets/js/components/Sessions/SolarGroupedChart.vue
@@ -1,9 +1,9 @@
 <template>
 	<div v-if="chartData.labels.length > 1" class="row">
-		<div class="col-12 col-md-6 mb-3">
+		<div class="col-12 col-md-6 col-lg-12 col-xxl-6 mb-3">
 			<PolarArea :data="chartData" :options="options" />
 		</div>
-		<div class="col-12 col-md-6 d-flex align-items-center py-0 py-md-3">
+		<div class="col-12 col-md-6 col-lg-12 col-xxl-6 d-flex align-items-center">
 			<LegendList :legends="legends" :device-colors="deviceColors" grid />
 		</div>
 	</div>
@@ -123,7 +123,7 @@ export default defineComponent({
 						ticks: {
 							stepSize: 25,
 							color: colors.muted,
-							backdropColor: colors.background,
+							backdropColor: colors.box,
 						},
 						grid: { color: colors.border },
 					},
diff --git a/assets/js/components/Sessions/SolarYearChart.vue b/assets/js/components/Sessions/SolarYearChart.vue
index 7a9c446a7..ac04238b4 100644
--- a/assets/js/components/Sessions/SolarYearChart.vue
+++ b/assets/js/components/Sessions/SolarYearChart.vue
@@ -180,7 +180,7 @@ export default defineComponent({
 						ticks: {
 							stepSize: 20,
 							color: colors.muted,
-							backdropColor: colors.background,
+							backdropColor: colors.box,
 							font: { size: 10 },
 							callback: (value: number) => this.fmtPercentage(value, 0),
 						},
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
index aaba625ff..774d3e843 100644
--- a/assets/js/views/Sessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -86,9 +86,9 @@
 					/>
 				</Card>
 				<div v-if="showExtraCharts">
-					<div class="row align-items-start">
+					<div class="row">
 						<div class="col-12 col-lg-6 mb-4">
-							<Card :title="firstExtraTitle" edge-to-edge>
+							<Card :title="firstExtraTitle" edge-to-edge class="h-100">
 								<div v-if="activeType === types.SOLAR">
 									<SolarYearChart
 										v-if="showSolarYearChart"
@@ -116,7 +116,7 @@
 							</Card>
 						</div>
 						<div class="col-12 col-lg-6 mb-4">
-							<Card :title="secondExtraTitle" edge-to-edge>
+							<Card :title="secondExtraTitle" edge-to-edge class="h-100">
 								<EnergyGroupedChart
 									v-if="activeType === types.SOLAR"
 									:sessions="currentSessions"