nextjs-app/components/compare/compareSections.module.css

@@ -55,24 +55,27 @@
 
 .cell {
   display: flex;
-  align-items: center;
+  align-items: baseline;
-  gap: 0.5rem;
+  gap: 0.35rem 0.5rem;
   flex-wrap: wrap;
-  padding: 0.45rem 0;
+  padding: 0.5rem 0;
   border-top: 1px solid var(--border-light);
-  margin-top: 0.45rem;
+  margin-top: 0.5rem;
   font-size: 0.95rem;
 }
 
+/* The school name gets its own full-width line above the value — real
+   school names are long and varied, so a fixed-width name column truncated
+   them ("Our Lady Queen of H…") or crowded the value. */
 .cellTag {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
-  width: 5rem;
+  flex-basis: 100%;
-  flex: none;
   font-size: 0.8rem;
   font-weight: 600;
   color: var(--sc, var(--text-secondary));
+  margin-bottom: 0.15rem;
 }
 
 .cellDot {
@@ -92,10 +95,9 @@
 .small {
   display: block;
   flex-basis: 100%;
-  padding-left: 5.5rem;
   font-size: 0.8rem;
   color: var(--text-muted);
-  margin-top: -0.05rem;
+  margin-top: 0;
 }
 
 .chip {
@@ -187,6 +189,7 @@
   display: flex;
   gap: 0.3rem;
   flex-wrap: wrap;
+  flex-basis: 100%;
   margin-top: 0.3rem;
 }
 

nextjs-app/lib/utils.ts

@@ -65,7 +65,7 @@ export function truncate(text: string, maxLength: number): string {
  * "Barclay", "St Mary's Catholic Primary School" → "St Mary's". Falls back to
  * a length-capped truncation for names that don't carry a type suffix.
  */
-export function shortName(name: string, maxLength = 20): string {
+export function shortName(name: string, maxLength = 32): string {
   let s = name
     .replace(
       /\s+(primary|junior|infant|nursery|community|foundation|catholic|academy|school|college)\b.*$/i,