fix: tater sprite z-index regression from mobile compat PR (#308)

* fix: tater sprite running behind plan document instead of in front

Move TaterSpriteRunning inside the z-0 content wrapper stacking context
so it layers correctly: above sidebars (z-auto) but below the plan
document (z-10). The mobile compat PR (#260) added relative z-0 to the
content wrapper, which trapped the plan at z-0 while the sprite at z-40
floated above everything.


* fix: move z-10 from main to inner content so sprite runs above grid

Author: backnotprop

packages/editor/App.tsx

@@ -907,8 +907,6 @@ const App: React.FC = () => {
   return (
     <ThemeProvider defaultTheme="dark">
       <div className="h-screen flex flex-col bg-background overflow-hidden">
-        {/* Tater sprites */}
-        {taterMode && <TaterSpriteRunning />}
         {/* Minimal Header */}
         <header className="h-12 flex items-center justify-between px-2 md:px-4 border-b border-border/50 bg-card/50 backdrop-blur-xl sticky top-0 z-[50]">
           <div className="flex items-center gap-2 md:gap-3">
@@ -1180,6 +1178,8 @@ const App: React.FC = () => {
 
         {/* Main Content */}
         <div className={`flex-1 flex overflow-hidden relative z-0 ${isResizing ? 'select-none' : ''}`}>
+          {/* Tater sprites — inside content wrapper so z-0 stacking context applies */}
+          {taterMode && <TaterSpriteRunning />}
           {/* Left Sidebar: collapsed tab flags (when sidebar is closed) */}
           {!sidebar.isOpen && (
             <SidebarTabs
@@ -1240,7 +1240,7 @@ const App: React.FC = () => {
               cancelText="Dismiss"
               showCancel
             />
-            <div className="min-h-full flex flex-col items-center px-2 py-3 md:px-10 md:py-8 xl:px-16">
+            <div 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">
               {/* Annotation Toolstrip (hidden during plan diff) */}
               {!isPlanDiffActive && (
                 <div className="w-full mb-3 md:mb-4 flex items-center justify-start" style={{ maxWidth: planMaxWidth }}>

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: 40, // Below plan document (z-50) but above other elements
+        zIndex: 5, // Above sidebars (z-auto) but below plan document (z-10)
         backgroundImage: `url(${spriteSheet})`,
         backgroundSize: `${TOTAL_SPRITE_WIDTH}px ${DISPLAY_HEIGHT}px`,
         backgroundPosition: 'left center',