[JalenEvans]

The TLC output panel had a hard-coded height (h-48 open, h-8 collapsed), so anything longer than a few lines meant scrolling inside a tiny box. This makes the panel's top edge drag-resizable.

Closes #12

Key changes

• TlcOutputPanel now tracks its open height as state (px) instead of a Tailwind height class, driven by a ResizableDivider direction="vertical" rendered at its top edge while open.
• Height is clamped to [64px, max(64, window.innerHeight - 320)]. The 320 accounts for surrounding chrome (Navbar ~53 + Footer ~69 + Playground tab bar ~37) plus a ~160px editor floor, so the code editor always keeps usable room regardless of viewport size. The clamp re-applies if the window is resized shorter after a drag.
• Collapsing and re-expanding remembers the last dragged height. The default (192px) and collapsed (32px) sizes match the old hard-coded values exactly, so nothing changes visually until a user actually drags.
• The height transition is suppressed for the duration of a live drag so the panel tracks the cursor 1:1 instead of animating/rubber-banding.
• ResizableDivider (also used by SplitLayout and the TLA+ intuition page) gained optional onDragStart/onDragEnd/ariaLabel props and role="separator" / aria-orientation / aria-label, all additive and backward compatible — the other two call sites are unchanged.
• A drag now also ends on window blur, fixing a pre-existing bug where releasing the mouse outside the viewport (or alt-tabbing mid-drag) left the drag "stuck" with its document listeners still attached.

Testing

Added __tests__/TlcOutputPanel.test.tsx (13 new tests) covering the drag math, both clamp boundaries, collapse/re-expand height memory, no handle while collapsed, the collapsed border, aria-orientation, viewport-resize re-clamping, and blur-ends-drag. Full suite passes (25/25), and npm run build succeeds.

Since this is a static export (output: "export"), window is only read inside event handlers/effects, never during render or in a useState initializer, to keep prerendering working.

Out of scope (follow-ups)

• Keyboard operability for the resize handle — the separator is currently non-focusable, which is valid ARIA for a plain divider, but arrow-key resizing would be a nice follow-up.
• Persisting the panel height across navigation.
• Touch/pointer-event support (currently mouse-only).

[Copilot]

Pull request overview

This PR makes the TLC Output panel vertically drag-resizable so users can expand it to see more output without being constrained to a small fixed-height box, aligning with the UX request in #12.

Changes:

• Replace Tailwind fixed heights in TlcOutputPanel with a remembered pixel height that can be adjusted via a vertical ResizableDivider, with clamping and resize re-clamping.
• Enhance ResizableDivider with drag lifecycle callbacks and improved ARIA semantics (role="separator", aria-orientation, aria-label) and end-drag-on-window-blur behavior.
• Add a new test suite covering resize math, clamps, collapse/restore behavior, and blur-ending-drag.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
src/components/TlcOutputPanel.tsx	Implements resizable open height state, clamping, and drag UX (no transition during drag).
src/components/ResizableDivider.tsx	Adds optional drag callbacks, ARIA attributes, and blur-to-end-drag to improve robustness.
tests/TlcOutputPanel.test.tsx	Adds unit tests covering the new resize behavior and edge cases.

[JalenEvans]

It seems like the build was failing because Node 20 is being deprecated. Upgraded ci and cd to Node 24 to resolve that issue.

[lemmy]

@FedericoPonzi The build failure seems to be an unrelated infrastructure issue. Could you please help?

[FedericoPonzi]

Thanks for the PR @JalenEvans !

@lemmy it looks like we need to provide write permissions to gh actions to allow the integration to upload the zip with the website preview: https://github.com/tlaplus/tla-by-example/settings/actions

but I cannot change it for some reason.
It's not a blocker for merge, I'll quickly checkout the branch and test locally and see how it looks like.

[lemmy]

I’m also unable to change the workflow permissions. Perhaps it’s a policy enforced at the enterprise (Linux Foundation) level.