From f793febbed8748811ff33c6c671b84cbb3e462b7 Mon Sep 17 00:00:00 2001
From: MS <github@4n4.de>
Date: Sat, 3 Oct 2026 11:36:18 +0200
Subject: [PATCH] fix(weather): only reserve grid columns for enabled fields

Since the switch to CSS grid (#4118) the forecast and hourly views always
define seven column tracks and are rendered as a block-level grid:

- The tracks of disabled fields are empty, but the rows (subgrids) still
  add half of their 25px column gap after the last visible column. So
  every view ends with 12.5px of blank space and is not flush with the
  right edge in the right regions.
- A view that is narrower than its region (e.g. the hourly view below a
  wider forecast) ignores the text alignment of the region and sticks
  to the left edge, also in the right and centered regions.

The templates now pass the number of enabled columns in a
--weather-columns custom property, which the grid uses for its track
count (falling back to 7 for custom templates). The grid is rendered
inline so it again follows the region's text alignment, like the former
tables did.
---
 defaultmodules/weather/forecast.njk        | 3 ++-
 defaultmodules/weather/hourly.njk          | 3 ++-
 defaultmodules/weather/weather.css         | 7 +++++--
 tests/e2e/modules/weather_forecast_spec.js | 6 ++++++
 tests/e2e/modules/weather_hourly_spec.js   | 6 ++++++
 5 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/defaultmodules/weather/forecast.njk b/defaultmodules/weather/forecast.njk
index 047cd8b751..ddf0fd4b2e 100644
--- a/defaultmodules/weather/forecast.njk
+++ b/defaultmodules/weather/forecast.njk
@@ -1,7 +1,8 @@
 {% if forecast %}
   {% set numSteps = forecast | calcNumSteps %}
   {% set currentStep = 0 %}
-  <div class="{{ config.tableClass }} weather-forecast" role="table">
+  {% set columnCount = 4 + (1 if config.showUVIndex else 0) + (1 if config.showPrecipitationAmount else 0) + (1 if config.showPrecipitationProbability else 0) %}
+  <div class="{{ config.tableClass }} weather-forecast" role="table" style="--weather-columns: {{ columnCount }};">
     {% if config.ignoreToday %}
       {% set forecast = forecast.splice(1) %}
     {% endif %}
diff --git a/defaultmodules/weather/hourly.njk b/defaultmodules/weather/hourly.njk
index 61fdc5bc4c..592af54260 100644
--- a/defaultmodules/weather/hourly.njk
+++ b/defaultmodules/weather/hourly.njk
@@ -1,7 +1,8 @@
 {% if hourly %}
   {% set numSteps = hourly | calcNumEntries %}
   {% set currentStep = 0 %}
-  <div class="{{ config.tableClass }} weather-hourly" role="table">
+  {% set columnCount = 3 + (1 if config.showUVIndex else 0) + (1 if config.showHumidity != "none" else 0) + (1 if config.showPrecipitationAmount else 0) + (1 if config.showPrecipitationProbability else 0) %}
+  <div class="{{ config.tableClass }} weather-hourly" role="table" style="--weather-columns: {{ columnCount }};">
     {% set hours = hourly.slice(0, numSteps) %}
     {% for hour in hours %}
       <div class="weather-hourly-row{% if config.colored %}{{ " colored" }}{% endif %}" role="row" {% if config.fade %}style="opacity: {{ currentStep | opacity(numSteps) }};"{% endif %}>
diff --git a/defaultmodules/weather/weather.css b/defaultmodules/weather/weather.css
index 56bb41de02..92eab07598 100644
--- a/defaultmodules/weather/weather.css
+++ b/defaultmodules/weather/weather.css
@@ -13,9 +13,12 @@
 
 .weather .weather-forecast,
 .weather .weather-hourly {
-  display: grid;
+  display: inline-grid;
+  vertical-align: top;
   width: max-content;
-  grid-template-columns: repeat(7, max-content);
+
+  /* Templates set --weather-columns to the number of enabled columns, so no empty tracks and gaps are reserved */
+  grid-template-columns: repeat(var(--weather-columns, 7), max-content);
 }
 
 .weather .weather-forecast-row,
diff --git a/tests/e2e/modules/weather_forecast_spec.js b/tests/e2e/modules/weather_forecast_spec.js
index f880f8e085..594300164f 100644
--- a/tests/e2e/modules/weather_forecast_spec.js
+++ b/tests/e2e/modules/weather_forecast_spec.js
@@ -62,6 +62,12 @@ describe("Weather module: Weather Forecast", () => {
 				expect(firstCell.x).toBe(secondCell.x);
 			}
 		});
+
+		it("should not reserve space for disabled columns", async () => {
+			const grid = await page.locator(".weather .weather-forecast").boundingBox();
+			const lastCell = await page.locator(".weather .weather-forecast-row:nth-child(1) .max-temp").boundingBox();
+			expect(grid.x + grid.width - (lastCell.x + lastCell.width)).toBeLessThan(1);
+		});
 	});
 
 	describe("Absolute configuration", () => {
diff --git a/tests/e2e/modules/weather_hourly_spec.js b/tests/e2e/modules/weather_hourly_spec.js
index 446dc68c77..e712943622 100644
--- a/tests/e2e/modules/weather_hourly_spec.js
+++ b/tests/e2e/modules/weather_hourly_spec.js
@@ -30,6 +30,12 @@ describe("Weather module: Weather Hourly Forecast", () => {
 				expect(firstCell.x).toBe(secondCell.x);
 			}
 		});
+
+		it("should not reserve space for disabled columns", async () => {
+			const grid = await page.locator(".weather .weather-hourly").boundingBox();
+			const lastCell = await page.locator(".weather .weather-hourly-row:nth-child(1) .temperature").boundingBox();
+			expect(grid.x + grid.width - (lastCell.x + lastCell.width)).toBeLessThan(1);
+		});
 	});
 
 	describe("Hourly weather options", () => {