Make long scrolled notebook outputs resizable by seeM · Pull Request #13093 · posit-dev/positron

seeM · 2026-04-20T16:57:41Z

This PR makes long scrolled notebook outputs resizable. Addresses #12600.

Also added some missing functionality from the horizontal splitter and tidied up both splitters a bit:

HorizontalSplitter now has a hover state with delayed enablement matching the vertical splitter and VS Code Sash and a double click handler prop e.g. to reset to the original size
Fixed a bug in both splitters where unhovering was delayed
Fixed both splitters to use --vscode-sash-hoverBorder instead of --vscode-focusBorder (although the former defaults to the latter so it probably has little reach)
Removed hoverDelay state, changed hoverDelayer to a ref, and directly update hoverDelayer.defaultDelay - we didn't need to rerender when hover delay changes

Release Notes

New Features

Long notebook outputs are resizable (Make long scrolled outputs resizable #12600)

Bug Fixes

N/A

QA Notes

@:positron-notebooks @:web

There are e2e tests for this PR.

Adds a HorizontalSplitter below scrollable notebook cell outputs that lets users drag to resize the output height. Double-clicking resets to the default height, and re-running the cell clears the override. Improves HorizontalSplitter with hover delay, pointer capture on the sizer element, didDrag guard, user-select during drag, and the workbench.sash.hoverBorder color token.

… and use event targets

github-actions · 2026-04-20T16:57:58Z

E2E Tests 🚀
This PR will run tests tagged with: @:critical @:positron-notebooks @:web

^readme ^{valid tags}

seeM · 2026-04-20T17:00:33Z


 			// Calculate the delta.
-			const delta = Math.trunc(e.clientX - clientX);
+			const delta = e.clientX - clientX;


@dhruvisompura can you please double-check if this is ok? From my reading it should be fine as a float, but wasn't sure if I was missing something perhaps performance related. Note when testing performance in this branch that you have to compare with a main dev build - release builds are noticeably faster for some reason.

I'm pretty sure Math.trunc was very intentional so that we don't set the width of things to 123.23432px.

IIRC, we ran into an issue with sub pixel rendering previously in the console pane(?) and it caused things to look blurry. Not sure if this is related to that issue.

@softwarenerd do you recall what the problem was that we ran into that required us to truncate the pixel value?

Because e.clientX is a CSS-pixel value that can be fractional on high-DPI / fractional-scaling displays (Retina, Windows 125%/150% scaling, trackpad subpixel motion). The delta then feeds into newWidth at verticalSplitter.tsx:310, which is applied as an element width — non-integer widths cause subpixel rendering jitter (the panel edge wobbling mid-drag).

Why Math.trunc specifically (vs Math.floor / Math.round):

Math.trunc is symmetric around zero: trunc(1.9) = 1, trunc(-1.9) = -1. Drags left and right of equal magnitude produce equal-magnitude deltas.

Math.floor would bias: floor(-1.9) = -2. A right drag would move 1px per unit of motion, a left drag 2px — visible asymmetry during slow drags.

Math.round works but rounds at .5, which can produce inconsistent step sizes across consecutive mousemove events (sometimes rounding up, sometimes down).

So: Math.trunc gives clean, symmetric, integer deltas regardless of display scaling.

nstrayer

I like it. Is a nice QOL improvement.
I made a few comments on testing and keyboard-nav stuff.

Additionally I noticed some somewhat funky behavior when you shrink the output almost all the way. Mostly that the drag works as you would expect until a somewhat arbitrary point near fully collapsed where the shrinking stops happening from the bottom and starts happening from the top (aka the shifts in layout start happening above the cell rather than below. I captured it in a video below. The point at which this happens seems arbitrary and this video is one of the smallest versions of it. I think it's okay for now as 1. people probably wont shrink these outputs that far most of the time and 2. the output is still shrinking, just not in exactly the expected way.

Screen.Recording.2026-04-21.at.2.21.25.PM.mov

Co-authored-by: Nick Strayer <nick.strayer@posit.co> Signed-off-by: Wasim Lorgat <mwlorgat@gmail.com>

softwarenerd

I approve with a couple of notes. Has this been well-tested in Data Explorer?

softwarenerd · 2026-04-21T18:26:30Z


 			// Calculate the delta.
-			const delta = Math.trunc(e.clientX - clientX);
+			const delta = e.clientX - clientX;


I'm pretty sure Math.trunc was very intentional so that we don't set the width of things to 123.23432px.

softwarenerd · 2026-04-21T18:28:02Z

 		const calculateNewHeight = (e: PointerEvent) => {
 			// Calculate the delta.
-			const delta = Math.trunc(e.clientY - clientY);
+			const delta = e.clientY - clientY;


I'm pretty sure Math.trunc was very intentional so that we don't set the width of things to 123.23432px.

Reverted in 5ef2371, but I am curious why integer width is important. It's not uncommon for elements to have non-integer widths. Is this requirement specific to the data explorer or are there other benefits?

I'm having a hard time recalling precisely what this fixed, but, I coded it for a reason. I think because of some subpixel rendering jitter / artifacts. I guess I'd turn this question around and ask why you felt that it should be removed? Did you see some benefit to doing so?

Good question! I wanted to understand if/why it was needed and perhaps learn something new about browsers in the process. I couldn't figure it out myself so thought I'd start a discussion to hear from others. We still haven't figured it out, but given that it's not an important change and not required by the feature I was working on, I'm happy to leave it as is.

dhruvisompura

Just tested the changes and it looks like I can drag the output so its longer than the output itself. Is that intentional? I would expect it to cap out at the height of the contents.

Screen.Recording.2026-04-22.at.12.07.10.PM.mov

dhruvisompura · 2026-04-22T17:33:54Z

@@ -90,7 +90,7 @@ const getHoverDelay = (configurationService: IConfigurationService) =>
 * @param element The element.
 * @returns true, if the point is inside the specified element; otherwise, false.
 */
-const isPointInsideElement = (x: number, y: number, element?: HTMLElement) => {
+export const isPointInsideElement = (x: number, y: number, element?: HTMLElement) => {


I wonder if these should be in a helper/util file that both splitters can import since the horizontal splitter is using them now too.

Agreed, but this causes eslint layering errors because IConfigurationService is in platform which would require a bigger refactor that I didn't want to take on in this PR.

dhruvisompura · 2026-04-22T18:10:49Z


 			// Calculate the delta.
-			const delta = Math.trunc(e.clientX - clientX);
+			const delta = e.clientX - clientX;


@softwarenerd do you recall what the problem was that we ran into that required us to truncate the pixel value?

seeM · 2026-04-23T15:36:03Z

@dhruvisompura nice catch! Fixed in b056b8a

Screen.Recording.2026-04-23.at.17.33.11.mov

seeM added 15 commits April 20, 2026 15:31

use a ref for the hover delayer

86f3443

unhover immediately

07bea5f

use the correct theme color: sash hover border

419ce52

set pointer capture on the sizer, not the whole body

a993fae

set hovering based on final pointer position

ae1c7ae

clear hovering state after double click

e1ff347

reuse sash helpers

c2d907c

fix: remove style sheet from body

2a965d9

remove hover delay state (just set the delayer value); remove sashRef…

d9e9227

… and use event targets

rename sizer to sash

f3546cd

set role and orientation

55f8718

fix height offset while scrolling

bef723a

remove math.trunc - will double check

b73e3d8

clean up tests

d0310bf

seeM requested review from dhruvisompura and nstrayer April 20, 2026 16:57

seeM commented Apr 20, 2026

View reviewed changes

reload on web

2f2d451

dhruvisompura requested a review from softwarenerd April 21, 2026 17:11

nstrayer previously approved these changes Apr 21, 2026

View reviewed changes

Update test/e2e/pages/notebooksPositron.ts

22e5658

Co-authored-by: Nick Strayer <nick.strayer@posit.co> Signed-off-by: Wasim Lorgat <mwlorgat@gmail.com>

seeM dismissed nstrayer’s stale review via 22e5658 April 22, 2026 16:27

address reviews

33959fb

softwarenerd previously approved these changes Apr 22, 2026

View reviewed changes

re-add truncation

5ef2371

seeM dismissed softwarenerd’s stale review via 5ef2371 April 22, 2026 17:30

dhruvisompura reviewed Apr 22, 2026

View reviewed changes

cap the max height to content height

b056b8a

seeM merged commit d3b1914 into main Apr 23, 2026
19 of 20 checks passed

seeM deleted the feat/output-resize-handle-v2 branch April 23, 2026 15:36

github-actions Bot locked and limited conversation to collaborators Apr 23, 2026

Conversation

seeM commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Release Notes

New Features

Bug Fixes

QA Notes

Uh oh!

github-actions Bot commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dhruvisompura Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nstrayer left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

softwarenerd left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dhruvisompura left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

seeM commented Apr 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

seeM commented Apr 20, 2026 •

edited

Loading

github-actions Bot commented Apr 20, 2026 •

edited

Loading

dhruvisompura Apr 22, 2026 •

edited

Loading

softwarenerd left a comment •

edited

Loading