From 039f0919655fe62c83e71f3d43e4c4038c4e3a07 Mon Sep 17 00:00:00 2001
From: Oto Macenauer <oto.macenauer@absa.africa>
Date: Fri, 14 Aug 2026 14:30:18 +0200
Subject: [PATCH] fix: centre mermaid diagrams in their container

pre.mermaid already sets text-align:center, but mermaid gives the <svg>
it swaps in display:block, and a block box ignores text-align. A diagram
narrower than the reading column therefore sat flush left: measured at
21px from the left edge with 551px of space on the right.

Centred with margin-inline:auto instead.

The rule lives in the action's doc.css, so it applies to bundles
published from here on. Docs published by an earlier version of the
action keep their existing stylesheet until they re-publish.

Closes #63

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QqFK6yffibtCBTF8xZ4hXW
---
 actions/publish-single-page-docs/src/template.js             | 5 ++++-
 .../single-page-bundle/platform-overview/assets/doc.css      | 5 ++++-
 .../single-page-bundle/release-process/assets/doc.css        | 5 ++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/actions/publish-single-page-docs/src/template.js b/actions/publish-single-page-docs/src/template.js
index a2fe92d..3c4a653 100644
--- a/actions/publish-single-page-docs/src/template.js
+++ b/actions/publish-single-page-docs/src/template.js
@@ -219,7 +219,10 @@ body { margin: 0; font-family: var(--font-sans); color: var(--text-body); }
   font-size: 0.8125rem;
   color: var(--text-muted);
 }
-.mp-doc pre.mermaid svg { max-width: 100%; height: auto; }
+/* margin-inline:auto, not the parent's text-align. Mermaid sets display:block on
+   the <svg> it swaps in, and a block box ignores text-align — so a diagram
+   narrower than the column sat flush left. */
+.mp-doc pre.mermaid svg { max-width: 100%; height: auto; display: block; margin-inline: auto; }
 
 /* ── Footnotes (GFM) ──────────────────────────────────────────────────────── */
 .mp-doc .footnotes {
diff --git a/tests/fixtures/single-page-bundle/platform-overview/assets/doc.css b/tests/fixtures/single-page-bundle/platform-overview/assets/doc.css
index 35f6104..7242cc4 100644
--- a/tests/fixtures/single-page-bundle/platform-overview/assets/doc.css
+++ b/tests/fixtures/single-page-bundle/platform-overview/assets/doc.css
@@ -173,7 +173,10 @@ body { margin: 0; font-family: var(--font-sans); color: var(--text-body); }
   font-size: 0.8125rem;
   color: var(--text-muted);
 }
-.mp-doc pre.mermaid svg { max-width: 100%; height: auto; }
+/* margin-inline:auto, not the parent's text-align. Mermaid sets display:block on
+   the <svg> it swaps in, and a block box ignores text-align — so a diagram
+   narrower than the column sat flush left. */
+.mp-doc pre.mermaid svg { max-width: 100%; height: auto; display: block; margin-inline: auto; }
 
 /* ── Footnotes (GFM) ──────────────────────────────────────────────────────── */
 .mp-doc .footnotes {
diff --git a/tests/fixtures/single-page-bundle/release-process/assets/doc.css b/tests/fixtures/single-page-bundle/release-process/assets/doc.css
index 35f6104..7242cc4 100644
--- a/tests/fixtures/single-page-bundle/release-process/assets/doc.css
+++ b/tests/fixtures/single-page-bundle/release-process/assets/doc.css
@@ -173,7 +173,10 @@ body { margin: 0; font-family: var(--font-sans); color: var(--text-body); }
   font-size: 0.8125rem;
   color: var(--text-muted);
 }
-.mp-doc pre.mermaid svg { max-width: 100%; height: auto; }
+/* margin-inline:auto, not the parent's text-align. Mermaid sets display:block on
+   the <svg> it swaps in, and a block box ignores text-align — so a diagram
+   narrower than the column sat flush left. */
+.mp-doc pre.mermaid svg { max-width: 100%; height: auto; display: block; margin-inline: auto; }
 
 /* ── Footnotes (GFM) ──────────────────────────────────────────────────────── */
 .mp-doc .footnotes {