From 41d3f3b971e01c9edafd4c9e97aedf528b00bdbd Mon Sep 17 00:00:00 2001
From: Tudor <tudor@Tudors-MacBook-Pro.local>
Date: Fri, 2 Oct 2026 23:01:24 +0100
Subject: [PATCH] fix(school): never open a wrapped fact line with a separator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

At phone widths the fact line wraps, and each dot travelled with the value
after it, so the second line read "· 1,478 pupils". The line now starts
1.125rem left of the column and clips that strip: a value that starts a
line sits flush with the title and its dot is hidden. Measured on staging
at 360, 390 and 430 px: no element past the gutter, no page overflow.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../school/SchoolDetailShell.module.css       | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/nextjs-app/components/school/SchoolDetailShell.module.css b/nextjs-app/components/school/SchoolDetailShell.module.css
index 90650a4..ce9c1b0 100644
--- a/nextjs-app/components/school/SchoolDetailShell.module.css
+++ b/nextjs-app/components/school/SchoolDetailShell.module.css
@@ -145,28 +145,42 @@
 }
 
 
-/* Fact line: the phase pill, then plain register values joined by dots. */
+/* Fact line: the phase pill, then plain register values joined by dots.
+   The line starts 1.125rem left of the column and clips that strip, so a
+   value that wraps to the start of a line loses the dot in front of it
+   instead of opening the line with one. */
 .facts {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     row-gap: 0.25rem;
-    margin-bottom: 0.5rem;
+    margin: 0 0 0.5rem -1.125rem;
+    clip-path: inset(0 0 0 1.125rem);
     font-size: 0.875rem;
     color: var(--text-secondary);
 }
 
 
-.fact + .fact::before {
+.facts > * {
+    margin-left: 1.125rem;
+}
+
+
+.fact {
+    position: relative;
+}
+
+
+.fact::before {
     content: "·";
-    margin: 0 0.5rem;
+    position: absolute;
+    left: -0.75rem;
     color: var(--text-muted);
 }
 
 
 /* The search rows' phase pill, in the same phase colours. */
 .phasePill {
-    margin-right: 0.625rem;
     padding: 0.0625rem 0.4rem;
     font-size: 0.75rem;
     font-weight: 600;