starred/nginx-proxy-manager-NginxProxyManager

Fork 0

mirror of https://github.com/NginxProxyManager/nginx-proxy-manager.git synced 2026-04-25 17:35:52 +03:00

[GH-ISSUE #4855] Firefox layout offset caused by calc(100vw - 100%) in UI stylesheet #3053

New issue

Closed

opened 2026-02-26 07:37:42 +03:00 by kerem · 7 comments

kerem commented

2026-02-26 07:37:42 +03:00

Owner

Originally created by @vsc55 on GitHub (Nov 7, 2025).
Original GitHub issue: https://github.com/NginxProxyManager/nginx-proxy-manager/issues/4855

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:

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.

Originally created by @vsc55 on GitHub (Nov 7, 2025). Original GitHub issue: https://github.com/NginxProxyManager/nginx-proxy-manager/issues/4855 **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: ```css @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). <img width="1923" height="160" alt="Image" src="https://github.com/user-attachments/assets/6cdb8763-8eca-4c6e-8276-14e53969c105" /> Screenshot showing correct layout after commenting out the margin-left rule. <img width="1919" height="126" alt="Image" src="https://github.com/user-attachments/assets/e44f0f64-9089-4d5f-9405-b58c2fc371df" /> **Operating System** Windows 10, Firefox 144.0.2.

kerem

2026-02-26 07:37:42 +03:00

closed this issue
added the
bug
label

kerem commented

2026-02-26 07:37:42 +03:00

Author

Owner

@lastsamurai26 commented on GitHub (Nov 10, 2025):

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 commented on GitHub (Nov 10, 2025): 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).

kerem commented

2026-02-26 07:37:42 +03:00

Author

Owner

@jc21 commented on GitHub (Nov 11, 2025):

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

That css snippet above comes from Tabler

@jc21 commented on GitHub (Nov 11, 2025): I'm using Brave, which is chrome based, and I don't see this problem. That css snippet above comes from [Tabler](https://tabler.io/)

kerem commented

2026-02-26 07:37:42 +03:00

Author

Owner

@lastsamurai26 commented on GitHub (Nov 11, 2025):

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 commented on GitHub (Nov 11, 2025): 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.

kerem commented

2026-02-26 07:37:42 +03:00

Author

Owner

@jc21 commented on GitHub (Nov 11, 2025):

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

@jc21 commented on GitHub (Nov 11, 2025): Ah ok I see it when the page is longer than the viewport, on Proxy Hosts table I have like 50 entries.

kerem commented

2026-02-26 07:37:42 +03:00

Author

Owner

@lastsamurai26 commented on GitHub (Nov 11, 2025):

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

@lastsamurai26 commented on GitHub (Nov 11, 2025): i got the scroll bar after 9 entries (: but yes (:

kerem commented

2026-02-26 07:37:42 +03:00

Author

Owner

@7heMech commented on GitHub (Nov 13, 2025):

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

@7heMech commented on GitHub (Nov 13, 2025): Got same issue will try to fix in my big PR lol

kerem commented

2026-02-26 07:37:42 +03:00

Author

Owner

@7heMech commented on GitHub (Nov 13, 2025):

You can see it clearly on the audit logs tab.

@7heMech commented on GitHub (Nov 13, 2025): You can see it clearly on the audit logs tab.

kerem referenced this issue

2026-02-26 08:31:26 +03:00

[PR #3053] [MERGED] Bump semver from 7.3.2 to 7.5.4 in /test #3648

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/nginx-proxy-manager-NginxProxyManager#3053

No description provided.

Rows
Columns