Mobile UI `table layout` problem

[Rafat97]

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

I am using Sumsung mobile. When I was login, I saw my all the table layout are broken. I give the screenshot. Please check. And give me a feed back.
Thank you.

Nginx Proxy Manager Version

I use v2.9.11

Screenshots

Operating System

Mobile info :
Mobile name: Sumsung A70
Model number: SM-A705FN
OS: Android 11
Ram: 6gb
Browser: Chrome v95.0.4638.74

[Teraskull]

Workaround

As a workaround before this is fixed, you can do the following:

docker exec -it [container id] bash

apt update && apt install [preferred editor]

cd /app/frontend/css/

Then add the following to main.css:

.list-region {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.dropup, .dropdown {
  position: inherit;
}

Actual Fix

This can be fixed by adding table-responsive to the ClassName in all table components.

Proxy Hosts:

nginx-proxy-manager/frontend/js/app/nginx/proxy/list/main.js

Line 13 in 8e5255a

className: 'table table-hover table-outline table-vcenter card-table',

Redirection Hosts:

nginx-proxy-manager/frontend/js/app/nginx/redirection/list/main.js

Line 13 in 8e5255a

className: 'table table-hover table-outline table-vcenter card-table',

Streams:

nginx-proxy-manager/frontend/js/app/nginx/stream/list/main.js

Line 13 in 8e5255a

className: 'table table-hover table-outline table-vcenter card-table',

404 Hosts:

nginx-proxy-manager/frontend/js/app/nginx/dead/list/main.js

Line 13 in 8e5255a

className: 'table table-hover table-outline table-vcenter card-table',

Access Lists:

nginx-proxy-manager/frontend/js/app/nginx/access/list/main.js

Line 13 in 8e5255a

className: 'table table-hover table-outline table-vcenter card-table',

SSL Certificates:

nginx-proxy-manager/frontend/js/app/nginx/certificates/list/main.js

Line 13 in 8e5255a

className: 'table table-hover table-outline table-vcenter card-table',

Users:

nginx-proxy-manager/frontend/js/app/users/list/main.js

Line 12 in 8e5255a

className: 'table table-hover table-outline table-vcenter card-table',

Audit Log:

nginx-proxy-manager/frontend/js/app/audit-log/list/main.js

Line 12 in 8e5255a

className: 'table table-hover table-outline table-vcenter card-table',

Settings:

nginx-proxy-manager/frontend/js/app/settings/list/main.js

Line 12 in 8e5255a

className: 'table table-hover table-outline table-vcenter card-table',

Also inherit dropdown position to prevent it being hidden under the table borders:

.dropup, .dropdown {
  position: inherit;
}

[Rafat97]

Workaround

As a workaround before this is fixed, you can do the following:

docker exec -it [container id] bash

apt update && apt install [preferred editor]

cd /app/frontend/css/

Then add the following to main.css:

.list-region {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.dropup, .dropdown {
  position: inherit;
}

Actual Fix

This can be fixed by adding table-responsive to the ClassName in all table components.

Proxy Hosts:

nginx-proxy-manager/frontend/js/app/nginx/proxy/list/main.js

Line 13 in 8e5255a

className: 'table table-hover table-outline table-vcenter card-table',

Redirection Hosts:

nginx-proxy-manager/frontend/js/app/nginx/redirection/list/main.js

Line 13 in 8e5255a

className: 'table table-hover table-outline table-vcenter card-table',

Streams:

nginx-proxy-manager/frontend/js/app/nginx/stream/list/main.js

Line 13 in 8e5255a

className: 'table table-hover table-outline table-vcenter card-table',

404 Hosts:

nginx-proxy-manager/frontend/js/app/nginx/dead/list/main.js

Line 13 in 8e5255a

className: 'table table-hover table-outline table-vcenter card-table',

Access Lists:

nginx-proxy-manager/frontend/js/app/nginx/access/list/main.js

Line 13 in 8e5255a

className: 'table table-hover table-outline table-vcenter card-table',

SSL Certificates:

nginx-proxy-manager/frontend/js/app/nginx/certificates/list/main.js

Line 13 in 8e5255a

className: 'table table-hover table-outline table-vcenter card-table',

Users:

nginx-proxy-manager/frontend/js/app/users/list/main.js

Line 12 in 8e5255a

className: 'table table-hover table-outline table-vcenter card-table',

Audit Log:

nginx-proxy-manager/frontend/js/app/audit-log/list/main.js

Line 12 in 8e5255a

className: 'table table-hover table-outline table-vcenter card-table',

Settings:

nginx-proxy-manager/frontend/js/app/settings/list/main.js

Line 12 in 8e5255a

className: 'table table-hover table-outline table-vcenter card-table',

Also inherit dropdown position to prevent it being hidden under the table borders:

.dropup, .dropdown {
  position: inherit;
}

@Teraskull Thanks for giving this solution.

[github-actions]

Issue is now considered stale. If you want to keep it open, please comment 👍

[Teraskull]

Is this fixed yet?

[github-actions]

Issue is now considered stale. If you want to keep it open, please comment 👍

[github-actions]

Issue was closed due to inactivity.