Merge pull request 'fix(compare): match mockups — remove trends table + mobile measure-first cards' (#42) from fix/compare-mockup-drift into main

Reviewed-on: #42

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

@@ -55,27 +55,24 @@
 
 .cell {
   display: flex;
-  align-items: baseline;
+  align-items: center;
-  gap: 0.35rem 0.5rem;
+  gap: 0.5rem;
   flex-wrap: wrap;
-  padding: 0.5rem 0;
+  padding: 0.45rem 0;
   border-top: 1px solid var(--border-light);
-  margin-top: 0.5rem;
+  margin-top: 0.45rem;
   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;
-  flex-basis: 100%;
+  width: 5rem;
+  flex: none;
   font-size: 0.8rem;
   font-weight: 600;
   color: var(--sc, var(--text-secondary));
-  margin-bottom: 0.15rem;
 }
 
 .cellDot {
@@ -95,9 +92,10 @@
 .small {
   display: block;
   flex-basis: 100%;
+  padding-left: 5.5rem;
   font-size: 0.8rem;
   color: var(--text-muted);
-  margin-top: 0;
+  margin-top: -0.05rem;
 }
 
 .chip {
@@ -189,7 +187,6 @@
   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 = 32): string {
+export function shortName(name: string, maxLength = 20): string {
   let s = name
     .replace(
       /\s+(primary|junior|infant|nursery|community|foundation|catholic|academy|school|college)\b.*$/i,