fix(tater): actually put sprite behind the plan

The previous commit diagnosed this wrong. The real regression came from
PR #509 (Zed-style overlay scrollbars), which wraps <main> in
overlayscrollbars. The library's CSS applies
`position: relative; z-index: 0` to its `[data-overlayscrollbars-padding]`
and `[data-overlayscrollbars-viewport]` wrappers (see
overlayscrollbars.css:206/214), which creates a stacking context INSIDE
<main>. That traps the plan's `z-10`/`z-50` inside it: from the outer
content wrapper's perspective, the entire plan subtree paints at
effective `z=0`, so the tater at `z-5` ends up on top of it.

Bumping planAreaRef doesn't help — it's already trapped inside the
library's z-0 stacking context, so its value only changes layering
WITHIN that bubble. What has to change is the layer the whole bubble
paints at in the outer context, i.e. the <main> host itself.

Give the OverlayScrollArea <main> `relative z-20`, which makes it a
stacking context at z=20 in the outer wrapper. Keep the sprite at z-15
so it still paints above the z-10 sidebar rail / resize handles but
below <main>. Revert planAreaRef back to `relative z-10` — its bump
was a no-op given the trap.

https://claude.ai/code/session_019Q3pp1qUN52e76PqpHY6mg

Author: claude

packages/editor/App.tsx

@@ -1525,7 +1525,7 @@ const App: React.FC = () => {
           {/* Document Area */}
           <OverlayScrollArea
             element="main"
-            className={`flex-1 min-w-0 bg-grid ${!sidebar.isOpen ? 'lg:pl-[30px]' : ''}`}
+            className={`flex-1 min-w-0 bg-grid relative z-20 ${!sidebar.isOpen ? 'lg:pl-[30px]' : ''}`}
             data-print-region="document"
             onViewportReady={handleViewportReady}
           >
@@ -1539,7 +1539,7 @@ const App: React.FC = () => {
               cancelText="Dismiss"
               showCancel
             />
-            <div ref={planAreaRef} className="min-h-full flex flex-col items-center px-2 py-3 md:px-10 md:py-8 xl:px-16 relative z-20">
+            <div ref={planAreaRef} className="min-h-full flex flex-col items-center px-2 py-3 md:px-10 md:py-8 xl:px-16 relative z-10">
               {/* Sticky header lane — ghost bar that pins the toolstrip +
                   badges at top: 12px once the user scrolls. Invisible at top
                   of doc; original toolstrip/badges remain the source of

packages/ui/components/TaterSpriteRunning.tsx

@@ -25,7 +25,7 @@ export const TaterSpriteRunning: React.FC = () => {
         right: -DISPLAY_WIDTH, // Start off-screen right
         width: DISPLAY_WIDTH,
         height: DISPLAY_HEIGHT,
-        zIndex: 15, // Above sidebar tabs / resize handles (z-10) but below the plan area stack (z-20)
+        zIndex: 15, // Above sidebar tabs / resize handles (z-10), below the <main> plan host (z-20). Plan's own z-10/z-50 are trapped inside overlayscrollbars' z-0 wrapper, so main's z-index — not planAreaRef's — is what actually beats the sprite.
         backgroundImage: `url(${spriteSheet})`,
         backgroundSize: `${TOTAL_SPRITE_WIDTH}px ${DISPLAY_HEIGHT}px`,
         backgroundPosition: 'left center',