fix: let the editor background cover overflowing content (#182)

[jefago]

Fixes #182.

Problem

.TinyMDE had height: 100% (src/css/editor.css:8). In a fixed-height container — e.g. the height:300px; overflow-y:scroll wrapper from the issue — the editor's box stayed at the container's height while its children overflowed it. The background is painted by that box, so everything scrolled past the fold showed the container through instead of the editor background.

Fix

min-height: 100% instead. The editor still fills the container when it's near-empty, but now grows with the content when it overflows, so the background covers the full scrollable area. For an auto-height container both forms resolve the same way, so unsized containers are unaffected.

Tests

Committed test-first, in jest/editor-background.test.js — 344cd18 adds them failing, 8e27302 makes them pass. Two angles:

• Geometry: the background is painted by the .TinyMDE box, so that box must be at least as tall as container.scrollHeight.
• Pixel: sets the container background to red, fills past the fold, scrolls to the bottom, screenshots, and samples one pixel below the fold — which is the symptom as reported. The PNG is decoded in the browser already open (data URL → canvas → getImageData) rather than by adding an image library. The default Playwright context has deviceScaleFactor: 1, so screenshot and CSS pixels line up.

Before the fix, in all three browsers:

expect(received).toBeGreaterThanOrEqual(expected)
Expected: >= 965      Received: 310

Array [ 255, -255, -255 ]   <- expected white
       [ 255, +0,   +0   ]   <- got the container red

Full suite green: 705 passed across chromium, firefox and webkit (699 before, +6 new).

Also in this PR

A docs: commit correcting stale info in CLAUDE.md, noticed while writing the tests: it described the suite as Jest + Puppeteer (it's been Playwright for a while) and documented an npm run prepublishOnly script that no longer exists. Replaced with the scripts that do exist, plus the three-browser project layout and the global test helpers. Happy to split this out if you'd rather keep the PR to the fix.

Not addressed

.TinyMDE has padding: 5px with default content-box, so min-height: 100% computes to container height plus 10px — a fixed-height container always has ~10px of spurious scroll (visible in the numbers above: 310 for a 300px container). box-sizing: border-box would fix it, but it shifts layout slightly for existing users and is a separate defect from #182, so I left it out.

🤖 Generated with Claude Code

https://claude.ai/code/session_016GZM8Se4QqnhwfkAoRcdx4