Recalculate body padding after SPA navigation by angus-mcritchie · Pull Request #987 · php-debugbar/php-debugbar

angus-mcritchie · 2026-02-10T00:10:58Z

Problem

When using SPA navigation frameworks (Livewire, Turbo, HTMX), the body's padding may change between pages. The debugbar captures body padding at initialization time (lines 702-704) and uses these cached values in recomputeBottomOffset().

This causes a visual bug when navigating between pages with different layouts. For example, navigating from a page with a sticky header (large padding-top like 177px) to a page without one (no padding), the debugbar incorrectly restores the old padding value after navigation completes.

Steps to reproduce (using Livewire 4)

Create two pages with different body padding (e.g., one with a sticky header, one without)
Enable debugbar with bodyBottomInset: true and toolbarPosition: 'top'
Load the page with the sticky header (body has padding-top: 177px)
Use wire:navigate to navigate to the page without the sticky header
Observe: The debugbar restores padding-top: 177px even though the new page has no padding

Timeline of the bug

Page A loads (sticky header) → debugbar caches bodyPaddingTopHeight = 177
User navigates to Page B (no header) → Livewire clears body padding
livewire:navigated fires → debugbar calls recomputeBottomOffset()
recomputeBottomOffset() restores paddingTop = 177px (wrong!)

Solution

This PR adds listeners for common SPA navigation events and recalculates the cached body padding values after navigation completes:

livewire:navigated (Livewire 4)
turbo:load (Turbo/Hotwire)
htmx:afterSettle (HTMX)

The new recalculateBodyPadding() method:

Clears any debugbar-applied inline padding
Reads the page's actual CSS padding values
Updates the cached values
Calls recomputeBottomOffset() with the correct values

Testing

Tested with Livewire 4 wire:navigate between pages with different body padding values. The debugbar now correctly respects each page's actual padding.

Copilot

Pull request overview

This PR addresses a visual/layout bug where the debugbar caches document.body padding on initialization and later reapplies stale values after SPA-style navigations (e.g., Livewire/Turbo/HTMX), causing incorrect padding restoration when navigating between pages with different layouts.

Changes:

Adds SPA navigation event listeners (livewire:navigated, turbo:load, htmx:afterSettle) to trigger a recalculation step.
Introduces recalculateBodyPadding() to refresh cached body padding values and re-run recomputeBottomOffset().

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-10T00:14:29Z

resources/debugbar.js

+        recalculateBodyPadding() {
+            // Clear inline styles to read the page's actual CSS values
+            document.body.style.paddingTop = '';
+            document.body.style.paddingBottom = '';
+


recalculateBodyPadding() clears document.body.style.paddingTop/paddingBottom unconditionally. If options.bodyBottomInset is false, recomputeBottomOffset() is a no-op, so this listener would permanently wipe any existing inline body padding after SPA navigation. Even when bodyBottomInset is true, clearing these properties can remove application-defined inline padding (e.g. <body style="padding-top: …">) before you measure it, causing the cached values to be wrong. Consider early-returning when !this.options.bodyBottomInset, and/or preserving/restoring the previous inline padding values (or deriving the “original” padding by subtracting the debugbar offset from the current computed padding) instead of blanking the inline styles.

Copilot · 2026-02-10T00:14:29Z

resources/debugbar.js

+            this.bodyPaddingTopHeight = Number.parseInt(bodyStyles.paddingTop);
+            this.bodyPaddingBottomHeight = Number.parseInt(bodyStyles.paddingBottom);


Number.parseInt(bodyStyles.paddingTop/paddingBottom) will truncate fractional pixel values from getComputedStyle() (e.g. 12.5px -> 12), which can introduce small layout drift when recomputing offsets. Using Number.parseFloat(...) (and updating the initial cached reads in initialize() for consistency) avoids precision loss.

Suggested change

this.bodyPaddingTopHeight = Number.parseInt(bodyStyles.paddingTop);

this.bodyPaddingBottomHeight = Number.parseInt(bodyStyles.paddingBottom);

this.bodyPaddingTopHeight = Number.parseFloat(bodyStyles.paddingTop);

this.bodyPaddingBottomHeight = Number.parseFloat(bodyStyles.paddingBottom);

barryvdh · 2026-02-10T10:23:54Z

I think this makes sense, but should we make this configurable? Maybe set a list of eventNames somewhere? Otherwise every framework needs to add their own event.

When using SPA navigation frameworks (Livewire, Turbo, HTMX), the body's padding may change between pages. The debugbar captures body padding at initialization time and uses these cached values in recomputeBottomOffset(). This causes issues when navigating between pages with different layouts - for example, from a page with a sticky header (large padding-top) to a page without one (no padding). The debugbar would incorrectly restore the old padding value after navigation. This fix adds listeners for configurable SPA navigation events and recalculates the cached body padding values after navigation completes. Default events: livewire:navigated, turbo:load, htmx:afterSettle Changes: - Add spaNavigationEvents option (array of event names, configurable) - Skip recalculation when bodyBottomInset is disabled - Use parseFloat instead of parseInt to avoid precision loss

angus-mcritchie · 2026-02-11T11:40:42Z

I think this makes sense, but should we make this configurable? Maybe set a list of eventNames somewhere? Otherwise every framework needs to add their own event.

Good idea @barryvdh, I have made them configurable via PHP and move the defaults there.

barryvdh · 2026-02-11T11:42:19Z

Looks good :)
Can you fix the tests to add the new initialization code?

angus-mcritchie · 2026-02-13T23:28:13Z

Looks good :) Can you fix the tests to add the new initialization code?

Sure, all done!

Big fan of your work BTW, the debugbar has saved so much time and it was actually one of the reasons I wanted to try Laravel back in the day.

barryvdh · 2026-02-14T06:57:28Z

Thanks!

Copilot AI review requested due to automatic review settings February 10, 2026 00:10

Copilot started reviewing on behalf of angus-mcritchie February 10, 2026 00:11 View session

Copilot AI reviewed Feb 10, 2026

View reviewed changes

angus-mcritchie force-pushed the fix/recalculate-body-padding-on-spa-navigation branch from f47f94c to bf41e44 Compare February 10, 2026 21:54

angus-mcritchie added 2 commits February 11, 2026 22:35

Add support for configurable SPA navigation events in JavascriptRenderer

aa6047e

cleaned up javascript comments

7d1ca14

Add support for custom SPA navigation events in JavascriptRenderer tests

79db4af

barryvdh merged commit 957b5cc into php-debugbar:master Feb 14, 2026
21 of 22 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Comments

Recalculate body padding after SPA navigation#987

Recalculate body padding after SPA navigation#987
barryvdh merged 4 commits intophp-debugbar:masterfrom
angus-mcritchie:fix/recalculate-body-padding-on-spa-navigation

angus-mcritchie commented Feb 10, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

Copilot AI Feb 10, 2026

Uh oh!

barryvdh commented Feb 10, 2026

Uh oh!

angus-mcritchie commented Feb 11, 2026

Uh oh!

barryvdh commented Feb 11, 2026

Uh oh!

angus-mcritchie commented Feb 13, 2026

Uh oh!

Uh oh!

barryvdh commented Feb 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		this.bodyPaddingTopHeight = Number.parseInt(bodyStyles.paddingTop);
		this.bodyPaddingBottomHeight = Number.parseInt(bodyStyles.paddingBottom);

Uh oh!

Comments

Conversation

angus-mcritchie commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Steps to reproduce (using Livewire 4)

Timeline of the bug

Solution

Testing

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

barryvdh commented Feb 10, 2026

Uh oh!

angus-mcritchie commented Feb 11, 2026

Uh oh!

barryvdh commented Feb 11, 2026

Uh oh!

angus-mcritchie commented Feb 13, 2026

Uh oh!

Uh oh!

barryvdh commented Feb 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

angus-mcritchie commented Feb 10, 2026 •

edited

Loading