Menu is collapsed on mobile devices

[Kipjr]

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
• If having problems with Lets Encrypt, have you made absolutely sure your site is accessible from outside of your network? YES

Describe the bug

• Non-desktop (responsive design) does not show all tabs and features
• What version of Nginx Proxy Manager is reported on the login page? 2.62

To Reproduce
Steps to reproduce the behavior:

• get android phone and chrome
• open NPM in browser
• login
• see the difference between desktop and smartphone

Expected behavior

• Same options and tabs as on desktop

Screenshots

Operating System

• Android + Chrome
• Windows + Crome

[erraticallyefficient]

Can confirm I'm seeing the same issue.

Using the latest chrome browser on a pixel. Doesn't matter if you view the page in mobile mode or desktop mode.

[NuttCorp]

Having same issue. Unable to access SSL section from mobile web browser. Tried Chrome and Firefox. Switching to desktop view makes no difference. Definitely gonna buy you a coffee. Love the tool.

[infeeeee]

This is an issue on all mobile devices. This is reproducible in any browser's dev tools' responsive design mode

On the UI a collapse class is added to the menu, so it collapses on small screens. This class is also applied on the tabler demo page, but there is no button to uncollapse the menu on npm's frontend.

Quick and dirty fix on your instance:

• inside the container edit this file: /app/frontend/css/main.css
• find and delete this section: .collapse{display:none};

This is just a temporary fix, it will be overwritten on next update. Create a backup of this file before editing if you don't know what you are doing.

More permanent fix should be to fix it in the repo, but I couldn't find a documentation how to set up a build environment for this project, and I don't want to create an untested PR, so if anyone can test this, please create a PR:

Easy solution: do not collapse the menu at all, as npm is not 100% responsive, I think this won't be a big problem.
Just simply delete the word 'collapse' from this line: https://github.com/jc21/nginx-proxy-manager/blob/b42cc9ed3ef3a875feae5026c8f7b8b71b7856e9/frontend/js/app/ui/menu/main.js#L9

The page should look something like this with this fix:

Better solution should be to create a button for uncollapsing, as it's on tabler's demo page, but I have no idea how to do that.

[thunderclap82]

I'm surprised this hasn't been fixed yet considering it's been nearly a year. Looking at the suggestion it seems like a fairly straightforward fix. This isn't to belittle the developer -- real world life gets in the way, I get it -- but more of a reminder bump. :)

Overall, I really appreciate the work on this project.

[threehappypenguins]

Quick and dirty fix on your instance:

• inside the container edit this file: /app/frontend/css/main.css
• find and delete this section: .collapse{display:none};

Sorry for the noob question, but I am on Linux and I can't find /app/frontend/css/main.css

I looked in /var/lib/docker/containers and also in my Nginx Proxy Manager data folder, but can't find any css files. Where do I find them?

[infeeeee]

The issue is fixed, it should be included in one of the future versions, you you shouldn't do anything, just wait.

Btw the mentioned file is inside the container, not visible on the host's filesystem. You have to use docker exec -it <mycontainerid> sh to enter the container, or if you use portainer click on the "Exec console" button. There you can traverse the container's filesystem. https://stackoverflow.com/questions/30172605/how-do-i-get-into-a-docker-containers-shell

[threehappypenguins]

I can't wait for a future version. I really needed it fixed right now since I need access on my phone since my kids are always using my laptops for school or my husband is on the gaming laptop playing games. Lol

In ConnectBot on my phone I did docker exec -it nginx-proxy-manager bash and then had to install vim-tiny . I tried nano at first, but it kept freezing everything up. I had no idea how to use vim, but this helped . Anyways, it's all sorted now, and I have access to the menu on my phone.