Decouple balanced top and left window paddings to avoid diagonal resize jitter (#9518)

I had a bit of the same annoyance as #9064. I agree that with balanced
padding, you should expect horizontal jitter when resizing horizontally,
and vertical jitter when resizing vertically. Diagonal jitter, however,
happened because the top padding was upper bounded by the left padding,
coupling the vertical and horizontal wobbling. This looks kind of janky,
and it's surprising that the balance between top and bottom padding
changes as you vary only the width of the window.

With this PR, the upper bound is instead equal to the maximum left
padding. Since this only depends on the config, not the current window
width, the diagonal wobbling is avoided. Both the top and left padding
still have the same range of motion as before.

An alternative could be to bound by the minimum or median left padding
instead. Open to suggestions.

**Before**


https://github.com/user-attachments/assets/d12c5870-f05d-450f-89fc-c59eab90e199

**After**


https://github.com/user-attachments/assets/35b80bb0-9ea2-41c1-8502-3a8eec51dbc6
pull/9918/head
Mitchell Hashimoto 2025-12-15 12:11:04 -08:00 committed by GitHub
commit 051e6543ff
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 7 deletions

View File

@ -44,6 +44,15 @@ pub const Size = struct {
self.grid(),
self.cell,
);
// The top/bottom padding is interesting. Subjectively, lots of padding
// at the top looks bad. So instead of always being equal (like left/right),
// we force the top padding to be at most equal to the maximum left padding,
// which is the balanced explicit horizontal padding plus half a cell width.
const max_padding_left = (explicit.left + explicit.right + self.cell.width) / 2;
const vshift = self.padding.top -| max_padding_left;
self.padding.top -= vshift;
self.padding.bottom += vshift;
}
};
@ -258,16 +267,12 @@ pub const Padding = struct {
const space_right = @as(f32, @floatFromInt(screen.width)) - grid_width;
const space_bot = @as(f32, @floatFromInt(screen.height)) - grid_height;
// The left/right padding is just an equal split.
// The padding is split equally along both axes.
const padding_right = @floor(space_right / 2);
const padding_left = padding_right;
// The top/bottom padding is interesting. Subjectively, lots of padding
// at the top looks bad. So instead of always being equal (like left/right),
// we force the top padding to be at most equal to the left, and the bottom
// padding is the difference thereafter.
const padding_top = @min(padding_left, @floor(space_bot / 2));
const padding_bot = space_bot - padding_top;
const padding_bot = @floor(space_bot / 2);
const padding_top = padding_bot;
const zero = @as(f32, 0);
return .{