nginx-proxy-manager icon indicating copy to clipboard operation
nginx-proxy-manager copied to clipboard

Firefox layout offset caused by calc(100vw - 100%) in UI stylesheet

Open vsc55 opened this issue 1 month ago • 7 comments

Checklist

  • Have you pulled and found the error with jc21/nginx-proxy-manager:latest docker 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:

  1. Open Nginx Proxy Manager UI in Firefox (any version).
  2. Navigate to a page that triggers vertical scrolling.
  3. 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). Image

Screenshot showing correct layout after commenting out the margin-left rule. Image

Operating System Windows 10, Firefox 144.0.2.

vsc55 avatar Nov 07 '25 13:11 vsc55

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).

lastsamurai26 avatar Nov 10 '25 05:11 lastsamurai26

I'm using Brave, which is chrome based, and I don't see this problem.

That css snippet above comes from Tabler

jc21 avatar Nov 11 '25 06:11 jc21

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.

lastsamurai26 avatar Nov 11 '25 07:11 lastsamurai26

Ah ok I see it when the page is longer than the viewport, on Proxy Hosts table I have like 50 entries.

jc21 avatar Nov 11 '25 07:11 jc21

i got the scroll bar after 9 entries (: but yes (:

lastsamurai26 avatar Nov 11 '25 07:11 lastsamurai26

Got same issue will try to fix in my big PR lol

7heMech avatar Nov 13 '25 12:11 7heMech

You can see it clearly on the audit logs tab.

7heMech avatar Nov 13 '25 12:11 7heMech