[maxelkins]

Summary

• reduce the shared vertical and horizontal resize targets from 44px to 16px
• make the gaps between resizable panels match the 16px target size
• offset resize targets by 4px away from the resized panel's content
• render the visible 4px grip with CSS and keep it centred within the panel gap
• cover the sidebar, side-by-side editor, and stacked editor handles in the resize end-to-end tests

Why

The previous 44px targets extended well beyond the gaps between panels. On the instructions panel, the resize target overlapped the native scrollbar and intercepted pointer input, which made the scrollbar difficult or impossible to drag.

A 24px target would meet WCAG 2.2 success criterion 2.5.8, Target Size (Minimum), directly, but it creates an unnecessarily large gap in this layout. The same criterion also permits an undersized target through its spacing exception. For a 16px target, the imaginary 24px assessment circle extends 4px beyond each side of the target.

This change therefore moves the 16px target 4px away from the resized panel. The assessment circle reaches the panel boundary without overlapping its scrollbar. The target extends 4px into the non-interactive edge of the neighbouring panel, while the visible grip remains centred in the 16px gap.

The visible grip is now drawn with CSS rather than an SVG. This makes its position explicit relative to the interaction target and avoids SVG sizing affecting its visual alignment.

Because ResizableWithHandle is shared, the same sizing and positioning now applies to all resize handles rather than fixing only the instructions sidebar.

Screenshot.2026-10-16.at.13.06.54.mp4

Fixes RaspberryPiFoundation/digital-editor-issues#1902

[zetter-rpf]

The handle looks very slightly off center to me - maybe it needs to move 1px to the right?

[zetter-rpf]

Nice one, just small thing to center the handle

[maxelkins]

@zetter-rpf Yeah agree, will sort that, you reviewed it too quickly! haha