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: https://github.com/NginxProxyManager/nginx-proxy-manager/blob/8e5255a2751d10b05b96c3d36a2fd76f8d61d47f/frontend/js/app/nginx/proxy/list/main.js#L13

Redirection Hosts: https://github.com/NginxProxyManager/nginx-proxy-manager/blob/8e5255a2751d10b05b96c3d36a2fd76f8d61d47f/frontend/js/app/nginx/redirection/list/main.js#L13

Streams: https://github.com/NginxProxyManager/nginx-proxy-manager/blob/8e5255a2751d10b05b96c3d36a2fd76f8d61d47f/frontend/js/app/nginx/stream/list/main.js#L13

404 Hosts: https://github.com/NginxProxyManager/nginx-proxy-manager/blob/8e5255a2751d10b05b96c3d36a2fd76f8d61d47f/frontend/js/app/nginx/dead/list/main.js#L13

Access Lists: https://github.com/NginxProxyManager/nginx-proxy-manager/blob/8e5255a2751d10b05b96c3d36a2fd76f8d61d47f/frontend/js/app/nginx/access/list/main.js#L13

SSL Certificates: https://github.com/NginxProxyManager/nginx-proxy-manager/blob/8e5255a2751d10b05b96c3d36a2fd76f8d61d47f/frontend/js/app/nginx/certificates/list/main.js#L13

Users: https://github.com/NginxProxyManager/nginx-proxy-manager/blob/8e5255a2751d10b05b96c3d36a2fd76f8d61d47f/frontend/js/app/users/list/main.js#L12

Audit Log: https://github.com/NginxProxyManager/nginx-proxy-manager/blob/8e5255a2751d10b05b96c3d36a2fd76f8d61d47f/frontend/js/app/audit-log/list/main.js#L12

Settings: https://github.com/NginxProxyManager/nginx-proxy-manager/blob/8e5255a2751d10b05b96c3d36a2fd76f8d61d47f/frontend/js/app/settings/list/main.js#L12

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:

https://github.com/NginxProxyManager/nginx-proxy-manager/blob/8e5255a2751d10b05b96c3d36a2fd76f8d61d47f/frontend/js/app/nginx/proxy/list/main.js#L13

Redirection Hosts:

https://github.com/NginxProxyManager/nginx-proxy-manager/blob/8e5255a2751d10b05b96c3d36a2fd76f8d61d47f/frontend/js/app/nginx/redirection/list/main.js#L13

Streams:

https://github.com/NginxProxyManager/nginx-proxy-manager/blob/8e5255a2751d10b05b96c3d36a2fd76f8d61d47f/frontend/js/app/nginx/stream/list/main.js#L13

404 Hosts:

https://github.com/NginxProxyManager/nginx-proxy-manager/blob/8e5255a2751d10b05b96c3d36a2fd76f8d61d47f/frontend/js/app/nginx/dead/list/main.js#L13

Access Lists:

https://github.com/NginxProxyManager/nginx-proxy-manager/blob/8e5255a2751d10b05b96c3d36a2fd76f8d61d47f/frontend/js/app/nginx/access/list/main.js#L13

SSL Certificates:

https://github.com/NginxProxyManager/nginx-proxy-manager/blob/8e5255a2751d10b05b96c3d36a2fd76f8d61d47f/frontend/js/app/nginx/certificates/list/main.js#L13

Users:

https://github.com/NginxProxyManager/nginx-proxy-manager/blob/8e5255a2751d10b05b96c3d36a2fd76f8d61d47f/frontend/js/app/users/list/main.js#L12

Audit Log:

https://github.com/NginxProxyManager/nginx-proxy-manager/blob/8e5255a2751d10b05b96c3d36a2fd76f8d61d47f/frontend/js/app/audit-log/list/main.js#L12

Settings:

https://github.com/NginxProxyManager/nginx-proxy-manager/blob/8e5255a2751d10b05b96c3d36a2fd76f8d61d47f/frontend/js/app/settings/list/main.js#L12

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[bot]]

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

[Teraskull]

Is this fixed yet?