Changing the Browser Window Size/Aspect Ratio Causes the Task Grid to Malfunction in Find Type Projects

[Pseudorandom-Pseudonym]

Describe the bug
Changing the Browser Window Size/Aspect Ratio Causes the Task Grid to Malfunction. The task squares appear in order I.e. 1,2,3...and so on, but not all task squares are in a desirable position. It then becomes a requirement to scroll in order to check all of the task squares.

The psoition of tasks, and the need for scrolling reduce the rate at which contributors complete tasks.

To Reproduce
Steps to reproduce the behavior:

1. Contribute to a find type project
2. Resize/change the aspect ratio of you browser window by either, entering full screen mode in your browser, or restoring down the window and manually dragging its border.
3. If in full screen mode the malfunction should be visible right away, otherwise the window needs to be of the correct size, and aspect ratio to trigger the malfunction (sometimes it behaves as intended).

Expected behavior
When the window size changes, the size, and/or number of task squares should change with respect to it.

Screenshots

Fig.1. Standard View with Coloured Columns to Highlight (in this case) the (6:1) Pattern.

Fig.2. Full Screen View with Coloured Task Squares (they are the same colour as in Fig.1.).

Fig.3. Small Window View (the grid remains a 2x3 from this point smaller)

Desktop (please complete the following information):

• OS: [Windows 10]
• Browser [Firefox]
• Version [127.0.1]

Additional context
This is a variation of #4 (comment) and arguably a duplicate however, I have decided to open this as a new issue for the following reasons; The original bug report is confusing and doesn't include much detail, and I don't expect those issues to be rectified any time soon. It also does not show the difference between how the task grid usually appears, as opposed to the bugged version. The comment is clearly refering to the same, or a very simmilar bug, but the bug appears sufficiently different (perhaps it has been partially fixed or altered), and this report would otherwise be buried underneath it in the comments section. Its title is ambiguous, though that could be quite easily changed.

It has been stated that this bug appears when using MacOS 14.4.1, and Chrome 124.0.6367.62.

This bug is still present as of Release v0.1.4

When going into full screen mode the task squares increase in size and their number decreases, this is actually desirable...just not like this.

[ofr1tz]

Thanks for providing these details. Could you please check out if the issue has been solved for you with the newly deployed v0.1.5?

[Pseudorandom-Pseudonym]

You're welcome!

I confirm that on my end as of release v0.1.5 the the task grid displays 3 rows, regardless the browser window size or aspect ratio (so long as I can see them of course). I.e the task grid maintains an X : 3 layout, 1<X.

Provided the window height was above some minimum value, I did not need to scroll, to see all of the task squares in a set.

There are still some minor improvements that could be made, but I think they should be opened as new issues;

1. The scroll bar is ever-present. It could be hidden, either when scrolling is not possible, or when it isn't being interacted with via the cursor or scroll wheel.

2. The number of columns in the task grid layout does not always increment/decrement e.g. when changing the window size/ aspect ratio, sometimes the number of columns changes by X, 1<X<5 (based on my observations). Surely, if the number of columns can change by a number greater than one, then at some point it could have changed by one (the task squres do not change size). This would maximise the usage of the window regardless of its size/aspect ratio.

3. Implement a fullscreen mode in which the header and footer are not present, to maximise vertical space for imagery. Maybe some tweaking of vertical spacing if it's possible to reach the next size of imagery tiles/task squares.

I'm sure I'll come up with something else, given enough time😉

Thank you for fixing this issue!

It has significantly improved my experience when using mapswipe-web. I think it'll improve the quality of contributions too.