Skip to content

Horizontal scroll-shadow cue (#25)

Motivation

Wide tables (the taxonomy Organism table, the Descriptions hits table) scroll horizontally with overflow-x: auto but gave no visual hint that more columns existed off-screen.

User-facing change

  • A reusable ScrollShadow wrapper shows a subtle edge fade on whichever side still has hidden content; the fade disappears once that edge is reached. Applied to the taxonomy Organism table and the Descriptions hits table (the widest, minWidth: 1320) — on the latter only the table is wrapped, not the outfmt-gap hint note above it. Respects prefers-reduced-motion.

Code change summary

Validation evidence

  • cd web && npm run build → clean.
  • cd web && npm test -- --run TaxonomyPanel → 5 passed.
  • npx eslint on the changed files → clean.

No backend / API / IaC changes.