Merge pull request 'fix(places): phase-grouped tables, plain-English measures, styled links' (#118) from fix/place-page-presentation into fix/place-title-brand-doubling

Reviewed-on: #118

nextjs-app/__tests__/components/PlaceView.test.tsx

@@ -168,34 +168,3 @@ describe('PlaceView presentation', () => {
       .not.toBeInTheDocument();
   });
 });
-
-describe('PlaceView table alignment', () => {
-  const aligned: PlaceDetail = {
-    place: { kind: 'town', slug: 'brentwood', name: 'Brentwood', count: 2,
-             parent_authority: 'Essex', phases: ['primary'] },
-    schools: [
-      { urn: 1, school_name: 'Alpha Primary', phase: 'Primary',
-        rwm_expected_pct: 82, attainment_8_score: null } as never,
-    ],
-    averages: { rwm_expected_pct: 63, attainment_8_score: null },
-  };
-
-  it('aligns the measure heading and its values with the same class', () => {
-    // They were aligned by two different selectors whose specificity did not
-    // match: `.table th:last-child` (0,2,1) won and went right, while `.num`
-    // (0,1,0) lost to `.table td` (0,1,1) and stayed left. Sharing one class
-    // is what makes them impossible to drift apart.
-    const { container } = render(<PlaceView detail={aligned} englandAverage={61}
-      neighbours={[]} />);
-    const th = container.querySelectorAll('th')[1];
-    const td = container.querySelectorAll('tbody td')[1];
-    expect(th.className).toBeTruthy();
-    expect(td.className).toBe(th.className);
-  });
-
-  it('leaves the school-name column unclassed so it takes the spare width', () => {
-    const { container } = render(<PlaceView detail={aligned} englandAverage={61}
-      neighbours={[]} />);
-    expect(container.querySelectorAll('th')[0].className).toBe('');
-  });
-});

nextjs-app/components/places/PlaceView.module.css

@@ -144,24 +144,10 @@
   border-bottom: none;
 }
 
-/*
- * Header and value share one class and one rule, so they cannot drift apart.
- *
- * The first cut aligned them with two different selectors: `.table th:last-child`
- * at (0,2,1) beat the element rule and went right, while `.num` at (0,1,0) lost
- * to `.table td` at (0,1,1) and stayed left. The heading and its numbers sat on
- * opposite edges of the column.
- *
- * width:1% with nowrap makes the measure column hug its content so the school
- * name takes the remaining width — without it the two columns split evenly and
- * the gap between heading and value reads as misalignment on a wide screen.
- */
-.table th.num,
-.table td.num {
+.table th:last-child,
+.num {
   text-align: right;
   font-variant-numeric: tabular-nums;
-  width: 1%;
-  white-space: nowrap;
 }
 
 /* The measure is spelled out; the tooltip carries the definition. */

nextjs-app/components/places/PlaceView.tsx

@@ -71,9 +71,7 @@ function SchoolTable({ schools, phase }: { schools: School[]; phase: PhaseKey })
         <thead>
           <tr>
             <th scope="col">School</th>
-            {/* Same class as the value cell below: one rule aligns both, so
-                they cannot drift apart. */}
-            <th scope="col" className={styles.num}>
+            <th scope="col">
               <abbr className={styles.metricHead} title={metric.hint}>
                 {metric.heading}
               </abbr>