[paintparty]

Please answer the following questions and leave the below in as part of your PR.

• This PR corresponds to an issue with a clear problem statement.

• This PR contains a test to prevent against future regressions

• I have updated the CHANGELOG.md file with a description of the addressed issue.

---

All features and fixes included in this PR are described in the sections below.

• Global layout
• Draggable pane resizing
• Compiled code visibility toggle
• Codemirror dark-theme
• OS color scheme sync
• Native tooltip component
• Unified text selection styling
• Misc

Every section (except Misc), has one or more corresponding screen recordings. They are animated gifs that may take a few moments to load.

Global layout and framing refactor

Scrolling behavior:
Currently, if the content in either the editor or compiler pane exceeds the viewport height, both panes run off the viewport, the entire viewport gets a scroll bar and each pane also displays a vertical scroll bar. Additionally, the user is unable to scroll to the bottom of the pane (also unable to reach the horizontal scrollbar at bottom of pane) without first scrolling the page all the way down.

Superfluous borders:
The current two column pane layout renders a total of four vertical borders by virtue of the inline padding inside the viewport. This creates unnecessary visual noise and wastes forty pixels of horizontal padding. By eliminating this viewport padding, we can achieve a much more streamlined devtool look/feel, leveraging a single vertical divider to split the panes. This single divisor can double as a draggable resizing target.

Inconsistent vertical space below main section:
When source code or compiled code does not fill its vertical pane, the panes stop short of the bottom of the viewport, at a distance that depends on the height of the viewport. The bottom of the main section containing the panes should always be the same distance from the bottom of the viewport, which will create a consistent footer (25-50px). This can be utilized going forward for secondary/tertiary ui elements that would be happy living in the footer of this kind of playground

Before:

After:

Related

• Fix pane scrolling mechanics (.cm-scroller horizontal scrollbar not in view)
• Optimize scrollbar styling

Draggable resizing of editor and compile panes

Related

• Add Playwright tests for pane resizing

Compiled code section visibility toggle

Support codemirror dark theme across editor, repl output, and compiled code instances

Respect OS color scheme for initial theme state

Native tooltips optimized for light-dark themes

Unified text selection styling

Related

• Add Playwright tests for text selection

Misc

• Normalized, uniform font size across all elements
• Add pnpm instructions to readme (i couldn't get it running w/o using pnpm install)
• Add bb task to stop the port 5173 listener (for detached/leftover server scenario)
• Add local (default) tictactoe example, and make it dark-mode friendly
• Added a small handful of Radix Icons (MIT license) to playground/public/graphics/icons

[borkdude]

Thanks!