fix(web): INSPECT toggle follows panel's dock edge (right or bottom)

[naorsabag]

Summary

This PR was force-pushed after author feedback — the prior implementation hoisted the right BookmarkTab to the screen's right edge, but that made things worse (toggle overlapped the bottom-docked panel and never indicated where the panel actually was).

Real desired behavior: the toggle sits flush against the panel's leading edge wherever the panel docks.

inspectorSide	Toggle position
'right'	Vertical tab on the canvas's right edge (existing behavior, unchanged)
'bottom'	New: horizontal tab on the canvas's bottom edge, centered

Changes

• DataInspectionPanel.tsx — extends BookmarkTab edge prop from 'left' | 'right' to 'left' | 'right' | 'bottom'. For 'bottom', the tab renders horizontally (height: 24; minWidth: 76) with a horizontal label and an up/down arrow (▴/▾) that points toward the panel-open direction. zIndex back to 1001 since the tab no longer overlaps the panel.
• App.tsx + AppFragment.tsx — pick the right edge value at the call site from inspectorSide.

Test plan

• Dock inspect panel right (default), open / close — vertical tab on canvas's right edge, sits flush against panel left edge. (Unchanged behavior.)
• Dock inspect panel bottom — horizontal tab on canvas's bottom edge, centered, sits flush against panel top edge.
• Resize the bottom-docked panel — toggle stays glued to the top edge of the panel as it grows/shrinks.
• Open / close arrow on bottom tab makes sense: ▴ when closed (clicking opens panel upward into canvas), ▾ when open (clicking sends panel back down).
• Left FLOWS tab unchanged — still toggles the sidebar.
• cd packages/web && npm run build passes.

🤖 Generated with Claude Code

[coderabbitai]

Warning

Rate limit exceeded

@naorsabag has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 28 minutes and 10 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 9bb62f62-cf68-4575-84a7-c15acc8b453b

📥 Commits

Reviewing files that changed from the base of the PR and between 16b43e8 and 0bcbf55.

📒 Files selected for processing (3)

• packages/web/src/App.tsx
• packages/web/src/AppFragment.tsx
• packages/web/src/components/DataInspectionPanel.tsx

Walkthrough

Canvas containers in AppFragment and App are now marked as relative-positioned to enable canvas-relative bookmark tab anchoring. FLOWS and INSPECT tabs are repositioned within canvas containers, and INSPECT tab z-index is increased to maintain correct layering above the inspector panel.

Changes

Canvas-Relative Bookmark Tab Layout

Layer / File(s)	Summary
Canvas Layout & FLOWS Tab Positioning (AppFragment) packages/web/src/AppFragment.tsx	Canvas container adds relative class; FLOWS BookmarkTab is rendered as canvas-relative, flush against the sidebar's inner edge.
Canvas Layout & FLOWS Tab Positioning (App) packages/web/src/App.tsx	Canvas container adds min-w-0 min-h-0 flex relative; FLOWS BookmarkTab is rendered as canvas-relative with matching positioning logic.
INSPECT Tab Relocation (AppFragment) packages/web/src/AppFragment.tsx	INSPECT BookmarkTab moves outside the main editor area to the canvas container bottom, conditional on decodedFlow and independently toggling inspectorOpen.
INSPECT Tab Relocation (App) packages/web/src/App.tsx	INSPECT BookmarkTab is added to the canvas container bottom, conditional on selectedFlowId and controlling inspectorOpen independently of DataInspectionPanel rendering.
BookmarkTab Z-Index Layering packages/web/src/components/DataInspectionPanel.tsx	BookmarkTab z-index increases from 1001 to 1002 so the right-edge INSPECT tab renders above the inspector panel in bottom-dock scenarios.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• naorsabag/openhop#101: Modifies the same bookmark tab placement and z-index layering code across App.tsx, AppFragment.tsx, and DataInspectionPanel.tsx.
• naorsabag/openhop#108: Adjusts bookmark tab rendering and z-index in the same UI chrome files.
• naorsabag/openhop#95: Modifies canvas-edge bookmark tabs (FLOWS/INSPECT) placement in App.tsx and AppFragment.tsx.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(web): INSPECT toggle follows panel's dock edge (right or bottom)' accurately describes the main change: repositioning the INSPECT toggle to follow the panel's dock orientation, which is the core objective of the PR.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/inspect-tab-right-edge

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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