fix FableLoom graph header running off phone screens and clipping the rail

[atomantic]

Summary

The FableLoom graph view was unusable on a phone: the story header's five action buttons sat in one non-wrapping row, so Play ran off the right edge of the screen, and the stacked graph/rail split was sized in viewport units (graph min-h-[55vh] + rail max-h-[45vh]) even though the pane only gets what's left under the app chrome — and this route's <main> is overflow-hidden, so the validation panel's content was simply cut off below the fold.

• Header actions now come from one list, rendered as labelled buttons from sm up and demoted into the shared OverflowMenu on phones; Play stays visible as the primary action. Every action keeps an explicit aria-label.
• Graph/rail split is sized against the pane (rail max-h-[45%], graph takes the rest) instead of vh, so the selected/validation content is always reachable.
• Episode row fits one line on mobile: the episode picker, + Episode and the Graph/Outline toggle share a row via a new mobileSelectClassName escape hatch on TabPills.
• Validation panel: horizontally scrollable tab strip, wrapping stat headers (the 14 cuts · … · depth 12 line no longer collides with the heading), tighter phone padding.

Test plan

• client: 826 files / 10,481 tests pass; npm run lint clean.
• server: 1,779 files / 36,270 tests pass (no server changes; run as a guard).
• New regression tests in FableLoomStory.test.jsx: the rail is capped against the pane with no vh inline style and the graph pane keeps flex-1 min-h-0; every header action is reachable and actionable from the phone overflow menu.