fix(glossary): give the term list a parent it can fill

[sonyccd]

Closes #298.

The bug

PageContainer puts sx on its outer Box, then renders a Container between that and the children. The Container emits no display and no height, so a child relying on flex: 1 has a block-level parent and is inert. Glossary's term list is exactly that child (sx={{ flex: 1, minHeight: 0 }} at Glossary.tsx:155), so the page stacked from the top instead of filling.

Reproduced before fixing:

OUTER display=flex   MID tag=DIV display="block" height=""

and after:

MID display="flex" flexGrow="1" minHeight="0"

The fix

One prop — contentSx, which PageContainer already applies to the Container. The issue offered two options; its "with Glossary's MUI port" branch is the applicable one now that Tailwind is gone, so contentSx rather than contentClassName (which no longer exists — it was removed in #346 as dead API).

The test, and a trap worth recording

Glossary.test.tsx gains one test, confirmed to fail without the prop.

Writing it caught me out twice, both worth knowing for this suite:

1. The loading branch is a different PageContainer — one with alignItems: center and no contentSx. Its terms arrive from an async supabase mock, so a synchronous assertion measures the loading tree and sees display: block on the middle element. The test waits for a term first.
2. getComputedStyle(...).minHeight returns '0', not '0px', so the assertion parses it.

Scope

Long-standing, and predates the migration — the pre-MUI ui/page-container.tsx had the same plain inner div, as the issue notes. TestResultReview is the only other caller that needs this, and it already passes contentSx.

Full suite: 203 files / 3849 tests. Typecheck 152. Lint clean.

Closes #298

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
openhamprep	Ready	Preview	Sep 25, 2026 3:25pm UTC

[supabase]

Updates to Preview Branch (fix/glossary-fill-height) ↗︎

Deployments	Status	Updated
Database	✅	Fri, 25 Sep 2026 15:25:33 UTC
Services	✅	Fri, 25 Sep 2026 15:25:33 UTC
APIs	✅	Fri, 25 Sep 2026 15:25:33 UTC

Tasks are run on every commit but only new migration files are pushed.
Close and reopen this PR if you want to apply changes from existing seed or migration files.

Tasks	Status	Updated
Configurations	✅	Fri, 25 Sep 2026 15:25:42 UTC
Migrations	✅	Fri, 25 Sep 2026 15:25:55 UTC
Seeding	✅	Fri, 25 Sep 2026 15:25:59 UTC
Edge Functions	✅	Fri, 25 Sep 2026 15:26:08 UTC

---

View logs for this Workflow Run ↗︎.
Learn more about Supabase for Git ↗︎.

[claude]

Review

Small, well-scoped fix — verified against PageContainer.tsx and the existing contentSx usage elsewhere in the codebase (GlossaryFlashcards.tsx, TestResultReview.tsx, TopicDetailPage.tsx, PracticeTest.tsx). A few notes:

Correctness

• The root cause described (Container sitting between PageContainer's outer Box and the children with no display/height of its own, so a child's flex: 1 has nothing to size against) checks out against src/components/ohp/PageContainer.tsx:86-95.
• The fix is the minimal, idiomatic one — contentSx already exists on PageContainer for exactly this purpose (see PageContainer.tsx:16-25 and PageContainer.test.tsx:159-166, which documents the same failure mode). No new API surface added.
• Values used (display: flex, flexDirection: column, flex: 1, minHeight: 0) match the pattern already used by GlossaryFlashcards.tsx and TestResultReview.tsx, so this is consistent rather than a one-off.

Test coverage

• The new test correctly avoids the trap of asserting against the loading PageContainer (which intentionally has no contentSx, per Glossary.tsx:97-106) by waiting for findByText('Antenna') first — good catch, and worth having in a comment since it's non-obvious.
• Using parseInt(getComputedStyle(...).minHeight, 10) instead of a strict string match on '0px'/'0' is a nice defensive touch given the noted happy-dom quirk.
• Minor nit: the test selects the target element via container.querySelector('.MuiContainer-root'). This is coupled to a MUI internal class name rather than a semantic query, so it's a bit brittle to a MUI major-version class-name change — but given this test is specifically about verifying layout/CSS on a structural element with no accessible role, there isn't an obviously better query available (no data-testid/role fits naturally here), so this seems like a reasonable trade-off rather than a real issue.

Scope

• Correctly limited to Glossary.tsx; the PR description accurately notes TestResultReview is the only other current caller needing this and it already passes contentSx. No unrelated changes.

Security / performance

• No security or performance concerns — this is a pure CSS/layout fix with no data flow, network, or auth implications.

Overall: looks correct, consistent with existing conventions, and has a regression test that actually would have caught the bug (per the before/after repro in the description). No blocking issues.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.78%. Comparing base (7dffa8a) to head (04efb2c).
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #348   +/-   ##
=======================================
  Coverage   86.78%   86.78%           
=======================================
  Files         221      221           
  Lines        6205     6205           
  Branches     1879     1879           
=======================================
  Hits         5385     5385           
  Misses        820      820           

Flag	Coverage Δ
unittests	86.78% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
src/components/Glossary.tsx	82.81% <ø> (ø)

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.