Revert "✨ (map) left-align multi-line categorical legends (#4324)"

This reverts commit f4a8e4c.
owid · Jan 13, 2025 · bdf1b8f · bdf1b8f
1 parent c39e7b3
commit bdf1b8f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 9 deletions.
diff --git 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
@@ -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 {