From 2d0e4e8816dbaadcdb5754402b29af990469a142 Mon Sep 17 00:00:00 2001
From: Mikaal Naik <matthewnaik@gmail.com>
Date: Fri, 14 Aug 2026 16:23:57 -0400
Subject: [PATCH] Remove front-runner treatment from election landing

All mayoral candidates now render in the same uniform grid. Drops the
front-runner band, the "rest of the field" label, the FrontRunnerCard
component, and the frontRunnerKeys/frontRunnerNote content fields.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/app/toronto/vote/2026/data.ts            | 11 ---
 src/app/toronto/vote/2026/page.tsx           |  9 +--
 src/components/elections/ElectionLanding.tsx | 77 +-------------------
 3 files changed, 4 insertions(+), 93 deletions(-)

diff --git a/src/app/toronto/vote/2026/data.ts b/src/app/toronto/vote/2026/data.ts
index fc27ab8..dce5fe9 100644
--- a/src/app/toronto/vote/2026/data.ts
+++ b/src/app/toronto/vote/2026/data.ts
@@ -36,17 +36,6 @@ export { initialsFor, nameKey };
 
 export const ELECTION = getElection("toronto-2026");
 
-/**
- * Mayoral candidates given the prominent front-runner treatment, keyed by
- * `nameKey` (full name, not last name — the field has both an Olivia and a
- * Braeden Chow). Hand-maintained: update as the race develops.
- */
-export const MAYORAL_FRONT_RUNNER_KEYS = ["brad bradford", "olivia chow"];
-
-/** Caption under the front-runner heading — edit to match the current race. */
-export const FRONT_RUNNER_NOTE =
-  "The incumbent mayor and the leading declared challenger.";
-
 /** Zero-padded ward numbers ("01".."25") for static route generation. */
 export const WARD_NUMBERS: string[] = WARD_SHAPES.map((w) => w.n);
 
diff --git a/src/app/toronto/vote/2026/page.tsx b/src/app/toronto/vote/2026/page.tsx
index 33a2522..ffd2988 100644
--- a/src/app/toronto/vote/2026/page.tsx
+++ b/src/app/toronto/vote/2026/page.tsx
@@ -2,12 +2,7 @@ import type { Metadata } from "next";
 import { ElectionLanding } from "@/components/elections/ElectionLanding";
 import { WardMap, WardMapDefs } from "@/components/elections/WardMap";
 import { WARD_GEO } from "./wardGeo";
-import {
-  ELECTION,
-  FRONT_RUNNER_NOTE,
-  MAYORAL_FRONT_RUNNER_KEYS,
-  getToronto2026,
-} from "./data";
+import { ELECTION, getToronto2026 } from "./data";
 
 export const metadata: Metadata = {
   title: "Toronto 2026 Election",
@@ -48,8 +43,6 @@ export default async function Toronto2026ElectionPage() {
         ),
         wardsBlurb:
           "Twenty-five wards, twenty-five council races. Select a ward to see the candidates running to represent it.",
-        frontRunnerKeys: MAYORAL_FRONT_RUNNER_KEYS,
-        frontRunnerNote: FRONT_RUNNER_NOTE,
         closingHeadline: (
           <>The Toronto you know is possible doesn&rsquo;t vote itself in.</>
         ),
diff --git a/src/components/elections/ElectionLanding.tsx b/src/components/elections/ElectionLanding.tsx
index d4275d9..a6bf1ee 100644
--- a/src/components/elections/ElectionLanding.tsx
+++ b/src/components/elections/ElectionLanding.tsx
@@ -21,8 +21,8 @@ import type {
    The structure is fixed — hero, countdowns, the mayoral field, the ward
    finder, the closing pledge — and each region supplies its own copy plus,
    where it has one, its ward locator map. Sections a region can't fill drop
-   out rather than render empty: no front-runner keys means no front-runner
-   band, no advance-vote date in the registry means no advance-vote counter. */
+   out rather than render empty: no advance-vote date in the registry means
+   no advance-vote counter. */
 
 export type LandingContent = {
   heroTitle: ReactNode;
@@ -33,14 +33,6 @@ export type LandingContent = {
   closingBlurb: ReactNode;
   /** the fine print about where the roster comes from */
   sourceNote: ReactNode;
-  /**
-   * Mayoral candidates given the prominent front-runner treatment, by
-   * `nameKey` (full name, not last name — Toronto's field has both an Olivia
-   * and a Braeden Chow). Omit where we aren't calling a front runner.
-   */
-  frontRunnerKeys?: string[];
-  /** the caption under the front-runner heading; required when keys are set */
-  frontRunnerNote?: ReactNode;
 };
 
 export function ElectionLanding({
@@ -58,10 +50,6 @@ export function ElectionLanding({
   /** this region's locator map for a ward, when it has ward geometry */
   renderWardMap?: (ward: WardView) => ReactNode;
 }) {
-  const keys = new Set(content.frontRunnerKeys ?? []);
-  const frontRunners = view.mayoral.filter((c) => keys.has(c.key));
-  const field = view.mayoral.filter((c) => !keys.has(c.key));
-
   // Pre-rendered here rather than inside the lookup, because the locator map
   // is server-side geometry the client component can't build.
   const wardCards: Record<number, ReactNode> = {};
@@ -103,31 +91,8 @@ export function ElectionLanding({
             </h2>
           </div>
 
-          {frontRunners.length > 0 && (
-            <>
-              <div className="px-6 md:px-14 pb-6 border-t border-border-light pt-8">
-                <p className="type-label text-accent mb-2.5">Front runners</p>
-                <p className="font-serif text-[1.05rem] leading-[1.45] text-dark/80 max-w-[52ch]">
-                  {content.frontRunnerNote}
-                </p>
-              </div>
-              <div className="grid sm:grid-cols-2 gap-px bg-border-light border-y-2 border-dark">
-                {frontRunners.map((cand) => (
-                  <FrontRunnerCard
-                    key={cand.key}
-                    candidate={cand}
-                    election={election.slug}
-                  />
-                ))}
-              </div>
-              <p className="px-6 md:px-14 pt-8 pb-6 type-label text-text-secondary !tracking-[0.08em]">
-                The rest of the field
-              </p>
-            </>
-          )}
-
           <div className="grid grid-cols-[repeat(auto-fill,minmax(272px,1fr))] border-t border-l border-border-light">
-            {field.map((cand) => (
+            {view.mayoral.map((cand) => (
               <MayoralCard
                 key={cand.key}
                 candidate={cand}
@@ -327,42 +292,6 @@ function KeyDates({ election }: { election: SupportedElection }) {
 
 // ── Candidate cards ────────────────────────────────────────────────────────
 
-function FrontRunnerCard({
-  candidate,
-  election,
-}: {
-  candidate: CandidateView;
-  election: string;
-}) {
-  return (
-    <div className="bg-bg-alt flex items-center gap-6 sm:gap-7 px-6 md:px-14 py-9">
-      <div className="relative flex-none size-[clamp(104px,11vw,148px)] bg-dark overflow-hidden flex items-center justify-center font-sans font-medium text-[clamp(2rem,3vw,2.6rem)] tracking-[-0.03em] text-bg">
-        {candidate.image ? (
-          <Image
-            src={candidate.image}
-            alt={candidate.name}
-            fill
-            sizes="148px"
-            className="object-cover object-center"
-            priority
-          />
-        ) : (
-          candidate.initials
-        )}
-      </div>
-      <div className="min-w-0 flex flex-col gap-3">
-        <div className="flex items-center gap-3 flex-wrap">
-          <h3 className="font-sans font-medium text-[clamp(1.6rem,2.6vw,2.15rem)] tracking-[-0.03em] leading-[1.05]">
-            {candidate.name}
-          </h3>
-          {candidate.tag === "Incumbent" && <IncumbentBadge />}
-        </div>
-        <SiteLink candidate={candidate} election={election} race="mayor" />
-      </div>
-    </div>
-  );
-}
-
 function MayoralCard({
   candidate,
   election,