Seeding Report: Responsive Display is not rendered correctly.

[nathang15]

The columns of the Seeding Report are not displayed correctly when changing window size.

When changing the window size, the columns should appear with some columns being omitted to fit the mobile window size.

The images show the report for Seeding Type = "All" but all types of Seeding have this problem.

Here is how the report should look like when window size is mobile:

Compare to the current incorrect rendered display:

Steps to Reproduce:

1. Log in as manager or worker
2. Go to BarnKit tab and select seeding report.
3. Enter any valid date range.
4. Changing the window size to be smaller and the problem should appear.

When observe the code snippet in seedingReport.html, we can see that isMobile = true if the following conditions are met:

if (window.screen.width < 900 || window.screen.height < 900) {
    this.isMobile = true
}

And some columns should disappear when isMobile = true:

if(this.isMobile) {
   this.tableColumns[10].visible = false
   this.tableColumns[11].visible = false
   this.tableColumns[12].visible = false
   this.tableColumns[13].visible = false
   this.tableColumns[14].visible = false
}

You can inspect the element to see that the window size met the condition for isMobile to be true but the display does not rendered accordingly.

[nathang15]

I would like to be assigned this issue.

[braughtg]

This appears to be the same issue as #230 here, which is also in the FarmData2 upstream at: DickinsonCollege/FarmData2#592

[nathang15]

I believe this one is different. On my machine, the columns still display fully, and it remains the same when I minimize the window size, just that the report looks cropped out like this:

[nathang15]

I apologize, the issue is the same one as https://github.com/DickinsonCollege/FarmData2/issues/592

[braughtg]

I believe this one is different.

The behavior you report is different, but I think that the root cause is the same. It seems that whatever mechanism is being used to determine the window size is not working as expected. It is manifesting either as columns being hidden when they shouldn't be or not being hidden when they should be. Hopefully there is some other way to find the screen size.

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/). Though, I have not investigated that much.