From bdf1b8fa770b87d00b75489f63003cd9796fc973 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Mon, 13 Jan 2025 09:17:36 +0100
Subject: [PATCH] =?UTF-8?q?Revert=20"=E2=9C=A8=20(map)=20left-align=20mult?=
 =?UTF-8?q?i-line=20categorical=20legends=20(#4324)"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx b/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
index 31ad4e8050a..069a40c1549 100644
--- a/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
+++ b/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
@@ -809,10 +809,6 @@ 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 6a3c29eb8c7..a07da5438fa 100644
--- a/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
+++ b/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
@@ -514,11 +514,13 @@ export class MapChart
     }
 
     @computed get legendMaxWidth(): number {
-        return this.bounds.width
+        // it seems nice to have just a little bit of
+        // extra padding left and right
+        return this.bounds.width * 0.95
     }
 
     @computed get legendX(): number {
-        return this.bounds.x
+        return this.bounds.x + (this.bounds.width - this.legendMaxWidth) / 2
     }
 
     @computed get legendHeight(): number {
@@ -555,9 +557,7 @@ export class MapChart
     }
 
     @computed get legendAlign(): HorizontalAlign {
-        if (this.numericLegend) return HorizontalAlign.center
-        const { numLines = 0 } = this.categoryLegend ?? {}
-        return numLines > 1 ? HorizontalAlign.left : HorizontalAlign.center
+        return HorizontalAlign.center
     }
 
     @computed get numericLegendY(): number {