From f4a8e4c753b3b4e81f8b7dcdc1bd108705b4acdb Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Tue, 17 Dec 2024 17:01:48 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(map)=20left-align=20multi-line=20c?=
 =?UTF-8?q?ategorical=20legends=20(#4324)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../horizontalColorLegend/HorizontalColorLegends.tsx   |  4 ++++
 .../@ourworldindata/grapher/src/mapCharts/MapChart.tsx | 10 +++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx b/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
index c5ce14e262e..6595d83d192 100644
--- a/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
+++ b/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
@@ -808,6 +808,10 @@ export class HorizontalCategoricalColorLegend extends HorizontalColorLegend {
         return max(this.marks.map((mark) => mark.y + mark.rectSize)) ?? 0
     }
 
+    @computed get numLines(): number {
+        return this.markLines.length
+    }
+
     renderLabels(): React.ReactElement {
         const { manager, marks } = this
         const { focusColors, hoverColors = [] } = manager
diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx b/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
index a07da5438fa..6a3c29eb8c7 100644
--- a/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
+++ b/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
@@ -514,13 +514,11 @@ export class MapChart
     }
 
     @computed get legendMaxWidth(): number {
-        // it seems nice to have just a little bit of
-        // extra padding left and right
-        return this.bounds.width * 0.95
+        return this.bounds.width
     }
 
     @computed get legendX(): number {
-        return this.bounds.x + (this.bounds.width - this.legendMaxWidth) / 2
+        return this.bounds.x
     }
 
     @computed get legendHeight(): number {
@@ -557,7 +555,9 @@ export class MapChart
     }
 
     @computed get legendAlign(): HorizontalAlign {
-        return HorizontalAlign.center
+        if (this.numericLegend) return HorizontalAlign.center
+        const { numLines = 0 } = this.categoryLegend ?? {}
+        return numLines > 1 ? HorizontalAlign.left : HorizontalAlign.center
     }
 
     @computed get numericLegendY(): number {