From dd34602b0ea0e11cdc65de592983a51ba9621102 Mon Sep 17 00:00:00 2001 From: Heyoub Date: Mon, 24 Aug 2026 11:47:14 -0400 Subject: [PATCH 01/18] chore(plans): add site-check-153 plan Issue #153 walks the live site on desktop and mobile and collects five findings. Four are shippable together because they all land in the app shell or in one screen's outbound links; the fifth (replace the Home hero CTA with a mailing-list invite) has no mechanism to build against, so the plan records the block up front rather than inventing one. Co-Authored-By: Claude Fable 5 --- plans/site-check-153.md | 151 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 plans/site-check-153.md diff --git a/plans/site-check-153.md b/plans/site-check-153.md new file mode 100644 index 0000000..d288c9a --- /dev/null +++ b/plans/site-check-153.md @@ -0,0 +1,151 @@ +--- +status: in-progress +depends: [] +specs: + - specs/behaviors/app-shell.md + - specs/screens/volunteer.md +issues: [153] +--- + +# Plan: site check — header order, mobile sheet padding, dead outbound links + +## Scope + +Issue [#153](https://github.com/CodeForPhilly/codeforphilly-ng/issues/153) +("Site check for desktop & mobile") collects a walkthrough of the live site on +both breakpoints. Four of its items are shippable now; one is blocked (see +Follow-ups). + +What ships: + +- **Desktop header reorder** (spec-governed). The Volunteer CTA leaves the + content nav and becomes the rightmost element of the header, after the auth + control; About joins the left cluster's text links; a GitHub icon link is + added to the right cluster. +- **Mobile sheet padding + accessible name.** The sheet's nav and search sat + flush against the panel edge. Fixed with the intended shadcn structure + (`SheetHeader` + `SheetTitle`) plus explicit horizontal padding — which also + gives the underlying Radix dialog the accessible name it was missing. +- **Header ARIA cleanups.** Three defects surfaced by an accessibility pass over + the header, done here because this plan rewrites the same file. +- **Dead outbound links** (spec-governed). The whole `codeforphilly.gitbook.io` + space returns 404 "Content owner not found"; `Volunteer.tsx`'s two remaining + GitBook links are repointed at live equivalents. Same class of defect as + [`home-start-project-cta`](home-start-project-cta.md) (PR #128), which fixed + the Home screen's copy of the same dead URL. +- **Footer repo URL.** The "view this site on GitHub" link still pointed at + `codeforphilly-rewrite`; the repo is `codeforphilly-ng` and the old URL only + resolves through GitHub's rename redirect. + +Explicitly out of scope: + +- **Replacing the Home hero's Volunteer CTA with a mailing-list invite** (also + recommended by #153) — blocked, see Follow-ups. `Home.tsx` is untouched. +- Any other visual restyle of the header. The Volunteer button keeps its + existing green treatment; only its position changes. + +## Implements + +- [app-shell.md](../specs/behaviors/app-shell.md) — "Center / right at ≥ md" + split into a left content cluster and a right utility cluster, with the new + item order; "Auth controls" repositioned second-from-right; GitHub link added + to the right cluster and to the mobile sheet; the sheet's accessible name + added under Accessibility. +- [volunteer.md](../specs/screens/volunteer.md) — "Show up to meetups" card + links to the Meetup group; "Start your own project" band links to the + `CodeForPhilly/partnerships` first-steps guide. Both replace dead GitBook + URLs. + +## Approach + +### 1. Spec changes first (specops — source of truth leads) + +`specs/behaviors/app-shell.md` and `specs/screens/volunteer.md` both prescribed +the current (wrong) state, so they lead. Header spacing is deliberately *not* +specced — [specs/README.md:49](../specs/README.md) puts spacing outside spec +scope — so the mobile-sheet padding fix carries no spec change. + +### 2. `apps/web/src/components/AppHeader.tsx` + +- Left ` {/* Mobile: auth + hamburger */}
diff --git a/specs/behaviors/app-shell.md b/specs/behaviors/app-shell.md index 2262f09..95c0b52 100644 --- a/specs/behaviors/app-shell.md +++ b/specs/behaviors/app-shell.md @@ -190,6 +190,7 @@ It does not block initial paint waiting on `me`. Auth controls render skeletons - All dropdowns are keyboard-navigable - The mobile sheet traps focus while open and returns it to the trigger on close - The mobile sheet is a dialog with the accessible name "Menu" +- At ≥ md the header exposes two navigation landmarks: "Primary navigation" (the content cluster) and "Utility" (GitHub, search, auth, Volunteer) - Every icon-only control carries an accessible name; controls with visible text use that text as their accessible name rather than duplicating it in a label ## Print From d5a4221932f2158baba7a334df9829dff0a8ac3e Mon Sep 17 00:00:00 2001 From: Chris Alfano Date: Tue, 8 Sep 2026 21:04:09 -0400 Subject: [PATCH 17/18] fix(web): keep the header on one line between md and lg MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tailwind's container is 768px wide across the whole 768–1023 range (736px content box). Measured at 768: logo 128 + nav 297 + gaps 48 + utility cluster 387 = 860, so the document scrolled to 845px and "Help Wanted" wrapped onto two lines. Hide the GitHub icon link below lg (the mobile sheet keeps its own GitHub row) and narrow the desktop search to w-24 there, restoring w-48 / focus-within:w-72 at lg. The results dropdown is anchored right-0 with min-w-72 instead of stretching left-0 right-0, so it stays 288px wide over the narrow input — the width it already had at lg. After: 728px used at 768, no horizontal scroll; 1024 fits with the icon and wide search back. Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01RdRwHvDupRLV8GuJpYKzEr --- apps/web/src/components/AppHeader.tsx | 5 ++++- apps/web/src/components/SearchBox.tsx | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/apps/web/src/components/AppHeader.tsx b/apps/web/src/components/AppHeader.tsx index a781e09..bdde238 100644 --- a/apps/web/src/components/AppHeader.tsx +++ b/apps/web/src/components/AppHeader.tsx @@ -189,7 +189,10 @@ const navLinkClass = ({ isActive }: { isActive: boolean }) => function GitHubLink() { return ( -