From 02b89410f061a13036d9af0320ce7aff7d25a8b3 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Wed, 27 May 2026 22:42:48 +0200
Subject: [PATCH] style(board): center board and size columns to content

---
 app/components/BoardView.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/components/BoardView.vue b/app/components/BoardView.vue
index 78351f4..9b074ac 100644
--- a/app/components/BoardView.vue
+++ b/app/components/BoardView.vue
@@ -50,7 +50,15 @@ const hoveredId = ref<string | null>(null)
 <style scoped>
 .board {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  /* Each column hugs its widest block, blocks stretch to fill their cell, and
+     the grid is centered. So the two left blocks (Value for Customer, Tech-
+     Enabled) share one width and the two right blocks (Right First Time,
+     Building a Learning Organisation) share another, the bottoms line up, and
+     the outer silhouette stays a clean rectangle. The left column lands a touch
+     under half the right — wide enough to hold its A3 sheet without forcing a
+     rigid ratio. */
+  grid-template-columns: max-content max-content;
+  justify-content: center;
   gap: 0.75rem;
   font-family: 'Cutive Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   /* Base = A4 long side; A3/A2 derive from it by √2 so ratios stay exact.