From bd427ab1714ed6fb2e93c69823f305089cd9f22e Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Wed, 27 May 2026 23:46:29 +0200
Subject: [PATCH] style(board): reformat and center block labels

---
 .env.example                 |  2 +-
 app/components/BoardView.vue | 25 +++++++++++++++++--------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/.env.example b/.env.example
index 50e99cd..1886d22 100644
--- a/.env.example
+++ b/.env.example
@@ -17,4 +17,4 @@ GOOGLE_REDIRECT_URI=
 # Web Push / VAPID (Task 10)
 VAPID_PUBLIC_KEY=
 VAPID_PRIVATE_KEY=
-VAPID_SUBJECT=mailto:owner@theodo.com
+VAPID_SUBJECT=mailto:example@theodo.com
diff --git a/app/components/BoardView.vue b/app/components/BoardView.vue
index 9b074ac..6c29833 100644
--- a/app/components/BoardView.vue
+++ b/app/components/BoardView.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { board } from '~/board/definition'
+import { ref } from "vue";
+import { board } from "~/board/definition";
 
-defineEmits<{ select: [sectionId: string] }>()
+defineEmits<{ select: [sectionId: string] }>();
 
 // JS-tracked hover (rather than CSS :hover) so the highlight is observable in
 // tests and can later coordinate with the dashboard dot layer.
-const hoveredId = ref<string | null>(null)
+const hoveredId = ref<string | null>(null);
 </script>
 
 <template>
@@ -60,7 +60,8 @@ const hoveredId = ref<string | null>(null)
   grid-template-columns: max-content max-content;
   justify-content: center;
   gap: 0.75rem;
-  font-family: 'Cutive Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  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.
      Tune this single value to resize the whole board. */
   --sheet-base: 220px;
@@ -76,11 +77,13 @@ const hoveredId = ref<string | null>(null)
   font-size: 0.875rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
+  text-align: center;
 }
 
 .block__columns {
   display: flex;
   align-items: flex-start;
+  justify-content: center;
   gap: 0.5rem;
 }
 
@@ -107,9 +110,15 @@ const hoveredId = ref<string | null>(null)
 
 /* Each step up the A-series scales linear dimensions by √2 (A3 = A4·√2,
    A2 = A4·2), so the boxes keep the true relative paper sizes. */
-.section--a4 { width: var(--sheet-base); }
-.section--a3 { width: calc(var(--sheet-base) * 1.41421356); }
-.section--a2 { width: calc(var(--sheet-base) * 2); }
+.section--a4 {
+  width: var(--sheet-base);
+}
+.section--a3 {
+  width: calc(var(--sheet-base) * 1.41421356);
+}
+.section--a2 {
+  width: calc(var(--sheet-base) * 2);
+}
 
 .section.is-hovered {
   outline: 2px solid currentColor;