WebUI if is notresponsive on mobile

[cdn4lf]

Describe the bug
In web server move (-w), the interface is not being mobile responsive and is showing as a jumbled mess.

To Reproduce
Steps to reproduce the behavior:

1. Start Glances with the following options '-w' using docker (4.3.0.5)
2. Open on mobile
3. See mess of information

Expected behavior
Should default to single column

[arpitgupta]

I have seen the same behavior. If i downgrade to 4.2 then it is better. Current UI works better if I put my phone in landscape mode. Still have to scroll items to be able to view drive temps etc.

I am on android and tried this with chrome, firefox and brave browsers and they all show the same behavior.

[benjimons]

Same problem on iOS using Safari and Chrome for iOS.

From install of glances--4.3.0.5.arm64_sequoia.bottle.tar.gz

[github-actions]

This issue is available for anyone to work on. Make sure to reference this issue in your pull request. ✨ Thank you for your contribution ! ✨

[nicolargo]

Hi all,

the WebUI has been completely refactor in this version. For the moment it is not responsive on Mobile (aka non landscape) screen.

A ugly work-around is to switch to "Computer version" on your Web browser.

Any contributor are welcome to make the UX design fully responsive.

[nicolargo]

Have a look on:

• https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
• https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints

[nicolargo]

@cdn4lf @arpitgupta @benjimons Please can you test the latest version (4.3.0.7), it should correct the issue.

If it does, can you send me back a screenshot ?

[cdn4lf]

@nicolargo , looks good to me.

[arpitgupta]

@nicolargo it's better but now we seem to be missing data.

On left left frame data such as networks/disk io, filesystems and sensors is not visible at all. I tried to see if I could scroll to find it but no luck.

Even on the top header we seem to be missing detailed data of memory, swap, cpu and load etc.

[nicolargo]

@nicolargo it's better but now we seem to be missing data.

On left left frame data such as networks/disk io, filesystems and sensors is not visible at all. I tried to see if I could scroll to find it but no luck.

Even on the top header we seem to be missing detailed data of memory, swap, cpu and load etc.

Yes it's not a bug. If you want to display all stats please use the Display as computer version of your Web browser.

[arpitgupta]

@nicolargo I do not see the the left frame show desktop version is enabled in firefox. Top header data is visible.

[nicolargo]

I just push a new version on the develop branch, can you have a look ?

[arpitgupta]

Tried it out and the desktop view has more info now. See the various information from the left frame.

Some data is missing from the top header. For example CPU info is shown but not all. Same for swap info etc.

This is the top header when viewing as a desktop site on mobile

vs what I see on actual desktop

[nicolargo]

Yes space is limited. Only importants stats are displayed.