Seeding Report adaptive Table columns problem

[braughtg]

The table generated in the SeedingReport it supposed to change the columns that are displayed based on the width of the window. That is, on narrower windows (e.g. mobile) some columns are hidden.

On a wide desktop browser window the columns should be:

On a narrower desktop browser window or on mobile the columns should be:

However observed behavior is:

• Desktop browsers Chrome and Firefox running on MacOS and connecting to http://localhost always display all columns regardless of the browser window width.
• Firefox browser running in the DevContainer and connecting to http://fd2_farmdata2 always displays the columns for a narrow/mobile window.

This seems to be an issue with the function reporting the window width that is used by the Seeding Report to determine the view to display. This is currently done at the end of the created() function in the Seeding Report file (farmdata2_modules/fd2_tabs/fd2_barn_kit/seedingReport.html).

[braughtg]

• Perhaps there is another, more reliable way to determine the window width?
  • If so, this also should not be done just on created because that will then be stuck even if the window size is changed later. Can it be made responsive?
• Or perhaps we need to just display all of the columns all of the time?

[FutzMonitor]

This bug could not be recreated on either my laptop or computer. Both of them displayed all the columns.

Granted, the only difference is that I'm constantly removing the dev container since I'm using WSL. Maybe clearing the fd2 dev container might solve this? It's a silly suggestion but worth trying since that's the only difference I can note.

[braughtg]

I deleted the dev container but not the home directory and tried this again. I now see the check-box column on the left, but the other columns are still missing. Suggests there is something machine dependent going on. It could be the Arm64 vs AMD64 version of Firefox causing the issue.

@FutzMonitor Can you report the version information for Firefox in your dev container?

[braughtg]

When I also deleted the home directory docker volume this issue resolved. Now using Firefox in the dev container I see all of the columns. However, when using the dev tools to emulate a mobile device, all columns are still rendered. When doing the same using Chrome on the desktop (outside of the dev container) these issues were not observed and the behavior is correct.

So, my conclusion is that there are issues with Firefox's reporting of device dimensions in within the Dev Container.

Perhaps more investigation will yield an approach that will work well in both environments with all browsers?

[braughtg]

A little more fiddling with this and it seems the proper/expected behavior can be achieved by ensuring that the page is reloaded when the "user agent is changed" as shown here:

The above configuration is available when the browser is displaying a mobile view.

[braughtg]

New conclusion is that this should be documented somewhere... but it is not clear exactly where at this point... Probably somewhere in connection with testing. Thus, this would be related to Issue #572.

[braughtg]

Well... it's back... I'm now seeing the same behavior originally documented when using Firefox in the dev container and the above setting with respect to the "user agent" is not correcting the problem. So I'm back to not being sure what is going on or what the resolution might be.

[FutzMonitor]

@FutzMonitor Can you report the version information for Firefox in your dev container?

Sorry it took me so long to get back to this. I don't know if it's still relevant but here is the version information for my FireFox in the dev container.

[braughtg]

It appears that sometimes enlarging the browser window and fiddling with the "mobile view" and "user agent" settings in the dev tools can get the wide screen view to reappear. However, thus far there is no recipe for making this happen.

[braughtg]

The farmOS application introduces Bootstrap to every page. So there may be a way to solve this issue using the Bootstrap Breakpoints (https://getbootstrap.com/docs/5.0/layout/breakpoints/). My sense is that this will require some substantial edits to the page. Though, I have not investigated that much.