Introduce mobile support for the Portainer UI

[KopfKrieg]

Is your feature request related to a problem? Please describe.
Right now the Portainer web ui is not optimized for devices with small screens, e.g. smartphones or tablets. And even though Portainer probably isn't exactly meant for devices like that, I think they should still be supported through a proper layout (because, honestly, sometimes I just want to look at a service, or have to restart a container, and really don't want to boot my laptop for it).

Describe the solution you'd like
I don't really have an idea on how it should look, but I'd like to keep this issue open as a place for discussions.

Additional context
And by the way, I really, really want to thank you for Portainer. It's such a great piece of software, especially because of the newly introduced Portainer Edge agent.

[kveroneau]

I second this idea. I don't spend a majority of time using portainer on a smaller screen, but either releasing a mobile app(I'd honestly pay for such an app on Android) or support directly through the current webUI would be very awesome. While I don't expose my portainer to the Internet, I do use a VPN on my mobile devices to access it when needed. A mobile app would be a feature I will 100% pay for. I don't require your enterprise features, so if you do develop an Android app, allow for it to be purchased via the Play Store, and allow it to connect to any version of portainer. Remote "docker exec" and "docker attach" support from the app with proper VT220 support would be a top notch feature. I believe ConnectBot has a separate terminal plugin they use which may allow for commercial programs to utilize it.

[ithiru]

I second this idea. I don't spend a majority of time using portainer on a smaller screen, but either releasing a mobile app(I'd honestly pay for such an app on Android) or support directly through the current webUI would be very awesome. While I don't expose my portainer to the Internet, I do use a VPN on my mobile devices to access it when needed. A mobile app would be a feature I will 100% pay for. I don't require your enterprise features, so if you do develop an Android app, allow for it to be purchased via the Play Store, and allow it to connect to any version of portainer. Remote "docker exec" and "docker attach" support from the app with proper VT220 support would be a top notch feature. I believe ConnectBot has a separate terminal plugin they use which may allow for commercial programs to utilize it.

I put portainer behind traefik with basic auth and https so I can access it directly via web

[rdcavanha]

I'd be willing to contribute. I've downloaded the project but it seems like I have to run the backend and connect to the docker daemon, kubernetes and etc just to work on the frontend. Do you have any sort of mock to spin up a fake backend for API calls? Let me know what would be best way to work on this.

[sergioteula]

This would be awesome. Sometimes I need to check some container or manage them on the go, and having an appropiate adaptative UI will help a lot.

[mrmelon54]

I found this issue because I tried to use portainer on mobile and the desktop version doesn't work well for mobile at all.

[divStar]

I am managing my docker stuff using Portainer and the application is amazing - it's one of my all-time favorites (and trust me if I say I have seen thousands of applications in my life).

However: since I like to tinkle with my homelab using my phone (JuiceSSH is also amazing, so much in fact, that I bought the app), I'd love to have Portainer look mobile friendly. As a developer myself, I can imagine it being not easy to add proper mobile UX, especially without breaking the existent one (except if it was to use a totally different theme or something in which case one would have to enhance both or several themes when adding features - which is overhead).

I'd still love to see it happen and I'd definitely pay up to 20€ for it (one-time purchase).

I don't know if I am good enough to create a PR myself, but once things settle down a little, I might give it a whirl.

[spupuz]

I also need this

[Nick-Portainer]

Thanks for the feature request! I will raise this internally to discuss

[Nick-Portainer]

internal: PCT-187

[spupuz]

please give us some good news!

[Nick-Portainer]

We have not forgotten about this, there's a few bigger things that need to happen first before this can actually be looked into for implementation, I will continue to update when I can

[spupuz]

still on progress?

[Nick-Portainer]

No current updates, but as mentioned we are working on bigger pieces of work that need to happen before this. I will update when there is progress 😀

[spupuz]

any update or hope to have something working on mobile?

[Luxemburgo]

While we wait for the fantastic Portainer team to adapt their web interface for mobile, here's a quick and dirty hack to make the current interface a bit more usable on small screens. All this does is introduce some styles into the index.html.

Step 1
Copy the original index.html to the host:

sudo docker cp portainer:/public/index.html ./

Step 2
Edit index.html and add the following code just before </head> tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    @media screen and (max-width: 600px) {

        body {
            padding-top: 40px;
        }
        .flex.w-full.items-center.gap-1.p-0 {
            flex-wrap: wrap;
        }
        .btn-group.btn-group-sm {
            flex-wrap: wrap;
        }
        div#page-wrapper {
            --sidebar-closed-width: 0px;
        }
        .app-react-sidebar-Sidebar-module__root {
            overflow: hidden;
        }
        button.app-react-sidebar-Header-module__collapseBtn {
            position: fixed;
            left: 0;
            top: 0;
            transform: scale(1.5) translate(10px, 10px);
        }
        .mx-4.grid.grid-cols-2.gap-3 {
            display: block;
        }
        button.blocklist-item.\!m-0.flex.min-h-\[110px\].w-full.items-stretch.overflow-hidden.bg-transparent.\!pr-56 {
            display: block;
            border: 0;
        }
        .blocklist.mt-5.\!space-y-2.\!p-0 {
            border: 1px solid var(--border-blocklist);
            border-radius: 8px;
        }
        .absolute.inset-y-0.right-0.flex.w-56.justify-end {
            position: relative;
            width: 100%;
            border-top: 1px solid #ccc;
        }
        .flex.flex-1.items-center.py-3 {
            padding-inline: 20px;
        }
        home-view .app-react-portainer-HomeView-EnvironmentList-EnvironmentList-module__filter-left {
            width: max-content;
        }
        home-view .flex.gap-2 {
            width: max-content;
        }
        home-view .-mt-3 {
            overflow: auto;
        }
        .btn-group.ng-scope {
            flex-wrap: wrap;
        }
        .widget-content {
            overflow: auto;
        }
        .flex.justify-between.whitespace-normal.pt-3 {
            flex-wrap: wrap;
        }

    }    
</style>

Step 3
Copy the modified index.html back to the container

sudo docker cp ./index.html portainer:/public/index.html

IMPORTANT TO NOTE:
-Every time the container is recreated, the original file will be restored, and the edits will need to be reapplied.
-This hack is by no means exhaustive and was done in 20 minutes without the intention of having the necessary quality (but for some, this may be sufficient for basic tasks).
-It may stop working and lose compatibility with new versions of Portainer in the future.

How it looks

[ncresswell]

In the meantime, check out this project from the community: https://testflight.apple.com/join/F2vK7xo4

[divStar]

In the meantime, check out this project from the community: https://testflight.apple.com/join/F2vK7xo4

How is this useful? Especially for people, who don't use Apple (or rather: those, who don't use an iPhone)?

[ncresswell]

Just sharing, thats all…

[spupuz]

No news here.. 😣

[WhereRtheInterwebs]

There is also this: https://github.com/orgs/portainer/discussions/9716 which would be useful in conjunction with this ^