fix(web): chrome z-index above pixels + monochrome SVG playback icons

[naorsabag]

Summary

DataPixel renders at `zIndex: 1000` inside the canvas wrapper, but the canvas pane has `overflow: visible` — so a carrot positioned near the pane's edge could visually paint over the top header, the FLOWS sidebar, the INSPECT panel, or the bookmark tabs.

Pinned all four chrome elements to `position: relative` + `zIndex: 1001`:

• `App.tsx` header
• `AppFragment.tsx` header
• `Sidebar.tsx` left aside
• `DataInspectionPanel.tsx` aside + `BookmarkTab` (was zIndex 20 → 1001)

Test plan

• `npm test` passes (42/42)
• Visually verify carrots no longer poke into header/sidebar/inspector during mid-flight

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes

  • Improved z-index and positioning across headers, panels, and sidebar so UI layers render correctly and avoid visual overlap.

• New Features

  • Replaced emoji playback controls with consistent monochrome SVG icons and refined playback button layout for clearer, more accessible media controls.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 977c8e6e-6048-44ff-b72f-0e1b1c6ce8d5

📥 Commits

Reviewing files that changed from the base of the PR and between 01bdea2 and 4d3f3a2.

📒 Files selected for processing (1)

• packages/web/src/components/FlowCanvas.tsx

---

Walkthrough

This PR raises header, sidebar, and data inspection panel stacking to zIndex: 1001 with position: 'relative', and replaces FlowCanvas emoji playback labels with monochrome inline SVG icons plus small playback button layout tweaks.

Changes

Z-index Stacking Context Updates & Playback UI

Layer / File(s)	Summary
Header z-index elevation packages/web/src/App.tsx, packages/web/src/AppFragment.tsx	Both main and fragment-mode headers now include position: 'relative' and zIndex: 1001 while preserving background and borderBottom styles.
Data inspection panel layering packages/web/src/components/DataInspectionPanel.tsx	DataInspectionPanel container and BookmarkTab now use zIndex: 1001 (BookmarkTab changed from zIndex: 20) to render above canvas DataPixel (z=1000).
Sidebar positioning packages/web/src/components/Sidebar.tsx	Sidebar <aside> wrapper now has position: 'relative' and zIndex: 1001.
FlowCanvas playback icons & layout packages/web/src/components/FlowCanvas.tsx	Playback controls switched from emoji labels to inline SVG icon components; PlaybackButton uses display: inline-flex with centered alignment; added ICON_FRAME and individual icon helpers (Restart, Prev, Play/Pause, Next).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• naorsabag/openhop#95: Modifies inspector/sidebar UI in overlapping files; related to z-index/positioning changes here.
• naorsabag/openhop#93: Alters FlowCanvas playback UI; directly related to the playback control changes.
• naorsabag/openhop#90: Also modifies FlowCanvas playback/autoplay behavior and is likely connected to the playback control updates.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 30.77% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the two main changes: fixing z-index layering for UI chrome elements above data pixels, and replacing emoji icons with monochrome SVG playback controls.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/chrome-z-index

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}