NginxProxyManager/nginx-proxy-manager

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

Opened this issue · 0 comments

vsc55 commented

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.