Firefox layout offset caused by calc(100vw - 100%) in UI stylesheet
Checklist
- Have you pulled and found the error with
jc21/nginx-proxy-manager:latestdocker image?- Yes
- Are you sure you're not using someone else's docker image?
- Yes
- Have you searched for similar issues (both open and closed)?
- Yes
Describe the bug In Firefox, when a vertical scrollbar appears, the main content area shifts to the right, leaving an empty space on the left side of the screen. This issue doesn’t occur in Chrome. The cause seems to be the following CSS rule in the main stylesheet:
@media (min-width: 992px) {
:host, :root {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
}
Firefox includes the scrollbar width in 100vw, which results in a visible horizontal offset. Commenting out the margin-left line fixes the issue without breaking layout in any tested browser.
Nginx Proxy Manager Version 2.13.1
To Reproduce Steps to reproduce the behavior:
- Open Nginx Proxy Manager UI in Firefox (any version).
- Navigate to a page that triggers vertical scrolling.
- Observe a left-side space appearing equal to the scrollbar width.
Expected behavior The layout should remain aligned to the left with no extra space when the scrollbar is active, consistent with Chrome’s behavior.
Screenshots
Screenshot showing the layout shift in Firefox (with scrollbar active).
Screenshot showing correct layout after commenting out the margin-left rule.
Operating System Windows 10, Firefox 144.0.2.
I also experienced this during the beta phase of 2.13, but I could only reproduce it in Chrome-based browsers. Since Windows 10 is no longer officially supported by MS, it is also possible that programs will discontinue their support.
Unfortunately, I cannot reproduce this in Firefox (Windows 11 and macOS).
I'm using Brave, which is chrome based, and I don't see this problem.
That css snippet above comes from Tabler
I've now tested it in Brave too, sometimes it works, sometimes it doesn't, it's kind of strange.
But I noticed that when switching between access lists -> hosts (proxy), it reloads the header, which causes the bar to shrink briefly and then either expand again or stay that way.
Ah ok I see it when the page is longer than the viewport, on Proxy Hosts table I have like 50 entries.
i got the scroll bar after 9 entries (: but yes (:
Got same issue will try to fix in my big PR lol
You can see it clearly on the audit logs tab.