Subject viewer changes size during classification when 'limit subject height' is enabled

[eatyourgreens]

FWIW: I tried to see whether this was specific to the Transcription Task, or if there were other weird Firefox-specific 'page jump' issues. Here's an example from Science Scribbler (note change in image size between marking + question task). NB I don't think this is related (it happens on Chrome, too), but wanted to share just in case, since it seems like an odd thing to happen (not sure why subject image size would change mid-classification):

FEM_imagesizechange_Firefox.mov

Originally posted by @snblickhan in #6271 (comment)

EDIT: after some playing around in the project builder, I was able to reproduce this by checking the 'limit subject height' box for a workflow (#6275 (comment).) Checking that box styles the image with max-height, which means the image height can vary during a workflow, as long as it never exceeds the maximum. Styling the image with height fixes this bug.

[eatyourgreens]

FWIW: I tried to see whether this was specific to the Transcription Task, or if there were other weird Firefox-specific 'page jump' issues. Here's an example from Science Scribbler (note change in image size between marking + question task). NB I don't think this is related (it happens on Chrome, too), but wanted to share just in case, since it seems like an odd thing to happen (not sure why subject image size would change mid-classification):

This is caused by the viewer layout changing when you move from one task to another (which is weird because the viewer styling is supposed to be independent of the task.) Watch how grid-template-columns changes here. In particular, the width of the first column changes from 90px (drawing task) to 75px (question task.) The subject controls are switching into small-screen layout for some reason.

Screen.Recording.2024-09-07.at.11.38.33.mov

The height of the task navigation buttons, and the width of the subject controls (play button etc.) change from the drawing task to the question task. Design and layout should be consistent!

EDIT: the drawing tasks (drawing and transcription) modify the subject viewer by adding and removing an SVG <rect> that acts as the drawing canvas. The layout is changing when that rectangle is removed, so maybe that is causing the bug?

Instead of adding and removing that rectangle, it might be better to deactivate it by adding the inert attribute in modern browsers.

[eatyourgreens]

Sorry, something else I've noticed in that Science Scribbler video. On the question task, the pencil button is active, even though drawing is disabled.

The layout reflow bug is also specific to Science Scribbler. I have a workflow with two drawing tasks followed by a question task:
https://frontend.preview.zooniverse.org/projects/eatyourgreens/-project-testing-ground/classify/workflow/3370?env=staging

That workflow does not reflow the layout when you go from the drawing tasks to the question task.

[eatyourgreens]

the drawing tasks (drawing and transcription) modify the subject viewer by adding and removing an SVG that acts as the drawing canvas. The layout is changing when that rectangle is removed, so maybe that is causing the bug?

Instead of adding and removing that rectangle, it might be better to deactivate it by adding the inert attribute in modern browsers.

I played around with this in a local branch. The sizing bug is still there even if you don't remove the drawing canvas for question tasks.

[eatyourgreens]

I can reproduce this bug on my staging workflow (single image viewer) if I tick the lab checkbox that limits the subject height.
https://localhost:8080/?project=908&workflow=3832

Screen.Recording.2024-09-10.at.13.22.18.mov

https://frontend.preview.zooniverse.org/projects/eatyourgreens/-project-testing-ground/classify/workflow/3832?env=staging

Screen.Recording.2024-09-10.at.13.28.28.mov

[eatyourgreens]

Fixed by styling the image with height, not max-height, in #6276. That didn't work on smaller screens, where the subject needs to shrink to preserve its aspect ratio.

On small-ish screens, the subject doesn't always fill the full width of the screen in the single-column layout. I think that's the same bug as #6061.

[eatyourgreens]

The task typography also changes when the subject size changes. The question task has a smaller font size than the drawing task.

Screen.Recording.2024-10-04.at.08.01.30.mov