#1127 Reversals: a search bar that stays on screen, and descriptions cut to their first lines

The reversals page lists 436 effects, but the search and outcome filters sat above the list and disappeared once you started scrolling, and each description ran to five or six lines. Now the controls stay at the top of the screen while the effects scroll past, and a live count shows how many are visible ("Showing 121 of 436 effects"). Each description shows its first two lines (three on a phone), with a "more" button for the rest.

• On desktop the toolbar holds the search, the count and the outcome buttons. Its Go to menu is hidden there, because the "On this page" card beside it already lists every section. On a phone the Go to menu stays, but only the search row and count stick, so the list keeps most of the screen.
• The toolbar stays on screen only while you are in the list and scrolls away after the last effect. Rows reached with Tab or Go to stop below it, not underneath.
• While a search is typed, the matching effects open in full, so the match is visible. The search reads each effect's own text, not its "more" button.
• Each "more" button names its effect for screen readers in its label ("more about Bystander effect") and reports whether it is expanded.
• The rows and the toolbar keep the reading width of a paragraph, so no line reaches 80 characters.
• scripts/rebrand/check_design.py: the line-length audit skipped nothing before, so it counted the clipped lines and the closed Statistics lists as text on the visible lines. It now skips text inside a closed disclosure or clipped by its box.
• list_filter gets an optional noun argument for the count ("effects"). The default is "entries".

Decisions to review

• Two lines on desktop and three on a phone, with the "more" button over the end of the last line. Without JavaScript, every description shows in full, as before.
• No Go to menu in the desktop toolbar, where the side card has the same list.

Based on #1118. Checks: SEO and source rules pass, the unit tests pass, and axe finds no WCAG A or AA issue on /reversals/ at 1280 px and 390 px. In a browser at both widths I tested the sticky bar, the count, search, the outcome buttons and "more"/"less", and found no sideways scroll and no script errors. The link check finds one broken link, /glossary/bulgarian/, which is also broken on main. The design check's page audit (overflow, text under 15 px, contrast, line length) is clean on /reversals/ at 390, 1024 and 1440 px. In the full local design check the remaining failures were all on /about/, which locally redirects to the live forrt.org. Spelling was not run, because codespell is not installed locally.

Desktop, start of the list (before above, after below)

Desktop, scrolled into the list

Phone, start of the list

Phone, scrolled into the list

Created with Claude Opus 5.5 in Claude Code.

🤖 Generated with Claude Code

---

Summary by cubic

Fixes the reversals page so the search and outcome filters stay on screen while the effects list scrolls, and cuts each effect description to its first lines with a "more" button for the rest.

• The toolbar sticks only within the list and scrolls away after the last effect; on a phone only the search row and count stay.
• A live count shows how many effects are visible, e.g. "Showing 121 of 436 effects".
• Descriptions show two lines (three on a phone) and open in full while a search is typed so the match is visible.
• "more" buttons name their effect for screen readers, report whether they are expanded, and re-check on close whether the text still runs over; the fade at the cut follows right-to-left text.
• The Go to menu is hidden in the desktop toolbar because the "On this page" card beside it lists every section.
• list_filter gains an optional noun argument for the count; the default is "entries".

Bug Fixes

• The design check's line-length audit now skips text nobody can see: inside a closed disclosure, or clipped by a box that shortens it or cuts it off sideways.