luci-theme-*: Channel analysis' Channel number column only shown if using luci-theme-material.

[ascendbeing]

Steps to reproduce:

go to: Status -> Channel analysis and if you're not on desktop open the page in desktop mode

Actual behavior:

If you are using material theme a column showing each SSIDs channel will be shown. Only on desktop mode I think. On all other themes(*), no such column is displayed.

*Checked 1/2 (light OR dark, didn't check both) bootstraps. I assume they aren't too different.

Expected behavior:

Column showing channel number for each ssid to be displayed no matter which theme.

Additional Information:

EDIT: user agent its occuring with: Mozilla/5.0 (Android 13; Mobile; rv:133.0) Gecko/133.0 Firefox/133.0 also happens with 64 bit android 14. these are are both arm with Firefox nightly.

I'm using customised build based on qosmio's fork.

DISTRIB_ID='OpenWrt' DISTRIB_RELEASE='SNAPSHOT' DISTRIB_REVISION='r28030-a19022d324' DISTRIB_TARGET='qualcommax/ipq807x' DISTRIB_ARCH='aarch64_cortex-a53' DISTRIB_DESCRIPTION='OpenWrt SNAPSHOT r28030-a19022d324' DISTRIB_TAINTS='no-all'

I used official builds on ath79/generic snapshot extensively. same issue is present there.

The bottom line is it's arbitrary that this useful field of information exists but is only used by 1 officially distributed theme, and for the 1 theme which shows this field, possibly only on desktop display mode, not in mobile display mode.

If I am correct that the channel number column is hidden for Mobile I would suggest showing it if it seems reasonable. consider you could abbreviate the column header from saying channel to being the tic tac toe grid. The channel numbers only take up to 3 characters, so you could have the column be 3 characters wide for mobile instead of 7 for the word channel.

[Ramon00]

add some screenshots?

[hnyman]

I think that the column is shown quite normally for me with the default bootstrap theme. r27902-6835ff8cbc Is that column the one that you mean?

[ascendbeing]

@hnyman yes that is the column. While observing this issue, I have been using Firefox nightly on Android. Is that on a different UA and/or on desktop? When I tried: dark OR light (forget which, didn't try both) bootstrap, openwrt and openwrt2020, this column wasn't shown at all, even in desktop mode.

[ascendbeing]

I have added affected user agent to additional information section.

[dannil]

Just to clarify, are you using the "Desktop site" option in Firefox on Android, and you've never seen it on an actual desktop screen? Then that is expected since you're forcing the browser to use cascade.css instead of mobile.css and that one doesn't define any definitions for the col-* CSS classes (since it shouldn't be needed since every desktop screen since forever is wide enough to fit all content in the viewport at once using luci-theme-bootstrap).

However, since cascade.css defines the hide-xs class that Channel, Mode, and BSSID uses, if your screen isn't big enough on mobile to fit all the content at once while in "Desktop site" (which my Galaxy S10e can't), those columns will be hidden (if you're in portrait mode, in landscape all content can be displayed on my S10e). It's not really a supported use case to use the desktop CSS while on a mobile device in LuCI, which is why you're seeing this issue.

If this is completely wrong please correct me, it's a bit confusing to keep apart what you mean by "desktop" and "desktop mode" because "desktop" implies a User Agent which identifies as a desktop OS and "desktop mode" (really "Desktop site" in Firefox) is something completely different (forcing the use of cascade.css on a mobile device by manipulating the User Agent to identify itself as a desktop OS).

EDIT: I can add that the reason it works in luci-theme-material is most likely because it's cascade.css defines the col-* CSS classes. I'm a bit unsure of the ramifications of just adding the same thing into luci-theme-bootstrap, would require some extensive testing at least.

[systemcrash]

since every desktop screen since forever is wide enough to fit all content in the viewport at once

🤣

[ascendbeing]

@dannil a few weeks back I unbricked my dormant wrt54gsv1, running LEDE 17 (back to being dormant but on v22 and not bricked). So I think I've used LuCi in desktop a couple times? Thanks for all the technical writeup and consideration here. When I posted this report, it didn't occur to me that screen and font zoom slider settings could be playing a main role in visibility, or lack thereof, for this particular column. My take on it was that if you replace Channel header with # you can reduce maximum character width of the column to 3 for up to 3 digit wide channel numbers, which would be 2 characters longer than the # sign itself, but still 4 characters shorter than having the whole word "Channel" taking up screen real estate.

[ascendbeing]

@dannil here's what I get with yes what I called "desktop mode" in Firefox nightly on Android 14: pardon the wild sticker in the bottom right, had to hide a mac address suffix without "desktop mode" the interface is far less usable (it's extremely zoomed in) and doesn't show channel number. This is material theme, the only theme that is showing this information.

[dannil]

So I think I've used LuCi in desktop a couple times?

The issue should not show up on a desktop OS using Bootstrap theme if you have a screen that's at least effective 940px wide (+ some margins I guess, let's say 1000px, just ball parking it, also depending on zoom and scaling), however lower than that and the max width of the Bootstrap theme sets a hard limit on the column sizes, irregardless of their resizing behavior. If it has then that's probably something else going on.

My take on it was that if you replace Channel header with # you can reduce maximum character width of the column to 3 for up to 3 digit wide channel numbers, which would be 2 characters longer than the # sign itself, but still 4 characters shorter than having the whole word "Channel" taking up screen real estate.

Absolutely, that would be a mitigation for this particular case (up to a certain point of course since it depends on the mobile device resolution), it's not a solution per say as you would need to adjust the column layout parts for the Bootstrap theme to make it scalable across every resolution but that's not extremely trivial. It may risk introducing some ambiguity as the Channel Width could also be represented via the # symbol since the width is also a number.

without "desktop mode" the interface is far less usable (it's extremely zoomed in) and doesn't show channel number. This is material theme, the only theme that is showing this information.

Thanks for the screenshot, it confirms my suspicions that this is what's going on. It doesn't also help that the max width of the Bootstrap theme is set to 940px, so even if we adjust the column definitions as described right above this, it might not help. The Material theme doesn't have that problem as you've noticed since it takes up the entire viewport of the browser, so it doesn't have a hard limit.