feat(web): default inspector dock to bottom on mobile

[naorsabag]

Summary

On narrow viewports (Tailwind md breakpoint, < 768px) the inspector now defaults to bottom-dock instead of right-dock when the user opens it. Closed-by-default behavior on mobile is unchanged.

Why: on a phone, right-docking the inspector crushes the canvas to a sliver. Bottom-docking keeps the canvas full-width above the panel — the standard mobile drawer pattern.

Applied to both App.tsx (local) and AppFragment.tsx (GitHub Pages playground).

Test plan

• npx prettier --check clean on touched files
• npm run typecheck -w @openhop/web passes
• npm test -w @openhop/web — 42/42 pass
• Manual: open https://naorsabag.github.io/openhop/ on a phone (or DevTools < 768px), tap the INSPECT bookmark tab — panel should slide up from the bottom, not in from the right
• Manual: on desktop, confirm INSPECT still opens on the right and the dock-switch button in the header still toggles to bottom

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Inspector panel now adapts its position based on your device type: mobile users will see it docked at the bottom of the screen, while desktop users experience it on the right side, optimizing the interface for different screen sizes and improving overall usability.

[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: 73799b75-6ea1-476f-9251-de148decb68d

📥 Commits

Reviewing files that changed from the base of the PR and between bebab3f and f428b40.

📒 Files selected for processing (2)

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

---

Walkthrough

App.tsx and AppFragment.tsx now initialize the inspector panel dock position based on viewport size: mobile viewports default to 'bottom' and desktop viewports default to 'right', replacing the prior fixed 'right' default in both components.

Changes

Viewport-aware inspector side initialization

Layer / File(s)	Summary
Inspector side initialization based on viewport size packages/web/src/App.tsx, packages/web/src/AppFragment.tsx	inspectorSide state initializers now use isMobileViewport() to select dock position: 'bottom' for mobile devices and 'right' for desktop, replacing the previous fixed 'right' default.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• naorsabag/openhop#133: Modifies App.tsx and AppFragment.tsx inspector docking behavior; this PR establishes viewport-based dock defaults while the other addresses INSPECT toggle and layout for bottom-dock scenarios.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title accurately summarizes the main change: defaulting the inspector dock to bottom on mobile viewports instead of always defaulting to right.
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.

_{✏️ 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 feat/inspector-bottom-on-mobile

---

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.}