Make playground code panel collapsible and resizable#416
Conversation
marvin-context-protocol
Bot
added
enhancement
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ea7e0e5f67
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| {!editorCollapsed && ( | ||
| <> |
There was a problem hiding this comment.
The new editorCollapsed gate hides the entire left pane, including the only Alert that renders Python/JSON errors. When users collapse the editor and then trigger an execution/parsing error, they get no visible failure signal and the preview can appear stale, which makes debugging and example switching confusing. Please render the error surface independently of the editor visibility (or provide an equivalent visible indicator) so failures are still observable in collapsed mode.
Useful? React with 👍 / 👎.
| window.addEventListener("mousemove", handleMove); | ||
| window.addEventListener("mouseup", handleUp); |
There was a problem hiding this comment.
Resize state is cleared only on this window's mouseup, but the playground is embedded in an iframe in docs; if the user drags the divider and releases the mouse outside the iframe, mouseup is never seen here. That leaves draggingRef stuck true and the forced cursor/userSelect styles active until another in-frame mouseup, causing accidental continued resizing. Add a fallback cancel path (e.g., blur/mouseleave/pointer-capture loss) to reliably terminate drag.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f60f75457a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const [editorCollapsed, setEditorCollapsed] = useState( | ||
| () => localStorage.getItem("pg-editor-collapsed") === "true", | ||
| ); |
There was a problem hiding this comment.
The new split-pane persistence reads localStorage directly during render; in contexts where storage is blocked (for example sandboxed iframes without same-origin storage or strict privacy settings), getItem can throw SecurityError and prevent the playground from mounting at all. Please wrap storage reads/writes with a safe fallback so resize/collapse persistence degrades gracefully instead of crashing the UI.
Useful? React with 👍 / 👎.
Adds a draggable divider between the code editor and preview pane (clamped between 15% and 85%, double-click to reset to 50/50) and a toolbar toggle button to collapse the editor entirely so the preview gets the full width. The toggle lives at the far left of the toolbar, adjacent to the panel it controls, and the split ratio plus collapsed state persist across reloads via localStorage.
Two review follow-ups: - Error alert was nested inside the (conditionally rendered) editor pane, so a collapsed code panel swallowed any Python/JSON failure. Hoist it out of the split into a shared banner below the panes. - Window-level mouseup listeners miss releases that happen outside the docs iframe, leaving the resize drag stuck. Switch the divider to pointer events with setPointerCapture so move/up always reach the handler, and add an onPointerCancel fallback.
Wraps all localStorage reads/writes in try/catch — sandboxed iframes and strict privacy modes can throw SecurityError on access, which would otherwise crash the useState initializer and prevent the playground from mounting. Also moves ExamplePicker into its own module to keep playground.tsx under its line budget after the safe-storage helpers were added.
jlowin
force-pushed
the
playground-collapsible-code
branch
from
752cf70 to
381f39b
Compare
1 participant
The playground's 50/50 split always gave half the room to the code editor, which on small screens left the live preview too cramped to show anything meaningful. There was no way to shift the balance short of zooming out the browser.
The split is now draggable — grab the divider and pull it either way (clamped at 15% / 85%, double-click the divider to reset). A toggle button at the far left of the toolbar collapses the editor entirely so the preview takes the full width; clicking the same button restores it. Split ratio and collapsed state both persist in
localStorage, so the layout you pick sticks across reloads and across docs pages that embed the playground.