Skip to content

The credentials column needs a shorter line and a cap of three #131

Description

@davidtaing

The credentials column in the roster renders every credential a practitioner holds, one per line, each line carrying a mark, the full catalogue label, an earned date and sometimes a Certificate link. The catalogue has 24 entries and the Academy track is most of them, so somebody working through it can hold a dozen — and one such row is taller than the four beneath it put together.

That breaks the thing the roster is for. src/components/practitioner-directory.tsx says it in its own header: rows rather than cards "because the job someone does here is comparing practitioners", and the credentials sit in a column so verification is a vertical scan. A column where one row is 12 lines and the next is 2 is not scannable, and the practitioner who lists the most is the one who pushes everyone else off the screen.

Two changes, and the cap is the second one

Shorten the line first. Each credential currently prints label + date + link, which is three pieces of information for something a visitor is scanning past. The date and the certificate link both belong on the profile page — the roster's job is to get you to a profile, not to be one. Cutting the line back to the mark and the label may be enough on its own for a typical row, and it makes the cap below cheaper.

Then cap it at three, with a toggle for the rest. Three because it is enough to show a certification plus two courses without becoming a list. The toggle is per-row local state in the client component — no URL state, no persistence.

Order the ticket sits behind

This should land after #130, because a cap is only safe once the top three are the right three. Capping the current order hides certifications behind courses, which makes the roster worse rather than tidier. If the ordering is not in yet, this ticket is blocked rather than merely eager.

Details that will bite

  • Search matches credentials that the cap hides. searchIndex flattens every credential's label, source and platform into the haystack, so a query can match a row whose matching credential is collapsed — the visitor sees a result with no visible reason for it. Pick one and state it: expand every row while a query is active, or pull the matched credential into the visible three. Recommendation is the first, because it is one condition rather than a second ranking, and a searching visitor has already narrowed the roster to a handful of rows.
  • The toggle needs a real label. "Show more" says nothing; Show 4 more / Show fewer says what is behind it and gives a screen reader the count. Include the practitioner's name in sr-only text the way the View profile link already does — four identical "Show 4 more" buttons on one page are indistinguishable out of context.
  • The Verified badge is unaffected. hasVerifiedBadge requires every credential verified and is computed over the whole list, not the visible slice. Collapsing is presentation only: nothing derived may read the truncated array.
  • A row with three or fewer renders no toggle at all — not a disabled one, not an empty slot.
  • Test the pure part. The slice-and-count belongs in a small function in src/lib/practitioners.ts with a unit test, rather than inline JSX arithmetic that only pnpm test:e2e can reach.

Done when

  • A practitioner holding ten credentials draws the same height as one holding three, until the toggle is pressed.
  • The toggle names its count, works by keyboard, and does not appear on short rows.
  • Searching for a credential never returns a row that appears not to have it.
  • pnpm lint, pnpm test and pnpm test:e2e pass.

Not in scope

  • The profile page, which shows the whole catalogue on purpose — earned and, behind the Not earned control, unearned. That is the surface the roster's shortened line is deferring to.
  • Ordering and the certification highlightCertifications outrank courses, and they should be filterable #130.
  • Paginating or virtualising the roster. The directory ships with the page and is small enough that this is a row-height problem, not a list-length one.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: uiReact routes, components, stylingenhancementNew feature or requesthitlNeeds a human (decision/design/review)size: SAn evening for someone new to this codebase

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions