A grid you can drag into any shape

The first versions of PaneScale had fixed layouts: one, two, four, six, nine, twelve or sixteen equal panes. Equal is a good default and a poor reality. One agent is doing the main work and deserves half the screen; two others are running tests and only need a strip; the docs pane can be tiny.

Version 0.2 made every part of the grid draggable. Here is how it behaves, and why.

#Seams and crossings

Every line between two columns or rows is a seam you can drag. Where a vertical and a horizontal seam meet is a crossing — drag it and both move at once, which is how you usually want to resize a corner pane. The dock next to the grid has a seam of its own.

#Snapping, but gently

While you drag, seams snap to even positions: halves, thirds, quarters. Snapping makes it easy to get back to a tidy layout and hard to end up with a column that is three pixels narrower than its neighbor for no reason. Hold your drag a little past a snap point and it lets go.

#Getting back to equal

Two ways, because you will need it more often than you think:

• Double-click a seam.
• Focus a seam and press Home.

Both distribute the space evenly along that axis again.

#Keyboard first

Seams are focusable. With one focused, the arrow keys move it in small steps. This makes the grid usable without a mouse, and it makes fine adjustments easier than dragging.

#Saved where it belongs

The shape of a grid is saved per workspace and per layout. Your six-pane arrangement for the web app doesn’t change the six-pane arrangement for the API, and switching from six to four panes and back restores the six-pane shape you had.

We considered one global shape. It lasted about a day — different projects really do want different arrangements.

#Panes move up, never away

When you switch to a smaller layout, panes that no longer fit move up into free cells. Nothing is closed without asking. When you switch back, the grid fills up again.

#Small details

• Terminals resize continuously while you drag, without flicker, because rendering is batched once per frame.
• Pane headers truncate gracefully: the agent name and status always stay visible; the lane name gives way first.
• Pre-warmed sessions follow the grid: free cells keep a session waiting, so a newly freed cell becomes useful immediately.

The grid is the part of PaneScale you look at most. It should feel like yours.