fix(classifier): proportional height for subject images

[eatyourgreens]

When 'limit subject height' is enabled, style subject images with a proportional height of 90% of the viewport height, up to a maximum size of the original image height.

Please request review from @zooniverse/frontend team or an individual member of that team.

Package

Linked Issue and/or Talk Post

• closes Subject viewer changes size during classification when 'limit subject height' is enabled #6275.

How to Review

Subject height should now be fixed during all workflow tasks, but never larger than the viewport.

https://local.zooniverse.org:3000/projects/chloezycheng/science-scribbler-synapse-safari/classify/workflow/26732

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

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

• Tests are passing locally and on Github
• Documentation is up to date and changelog has been updated if appropriate
• You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
• FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
• FEM works in a mobile browser

General UX

Example Staging Project: i-fancy-cats

• All pages of a FEM project load: Home Page, Classify Page, and About Pages
• Can submit a classification
• Can sign-in and sign-out
• The component is accessible
  • Can be used with a screen reader BBC guide to VoiceOver
  • Can be used from the keyboard WebAIM guide to keyboard testing
  • It is passing accessibility checks in the storybook

Bug Fix

• The PR creator has listed user actions to use when testing if bug is fixed
• The bug is fixed
• Unit tests are added or updated

[coveralls]

coverage: 78.546% (+0.03%) from 78.512%
when pulling 07da390 on eatyourgreens:fix-subject-height
into fef769f on zooniverse:master.

[eatyourgreens]

A fixed height subject breaks the layout on small screens, so this won't work on a phone.

Having said that, the current max-height styling doesn't work on a phone either (#6061.)

[goplayoutside3]

Unfortunately changing from max-height to height results in a bug where the viewer no longer adjusts to viewports < 1000px. The subject image must adjust as the viewport width adjusts. See https://local.zooniverse.org:3000/projects/fr/fulsdavid/the-daily-minor-planet/classify/workflow/22354?env=production&demo=true as an example where subject images are always square images.

🚨 Here's a screenshot of my phone's Safari browser with this branch run locally. The image is squished:

[goplayoutside3]

@eatyourgreens I realize I'm repeating what you commented about phones earlier, but how do you want to proceed with this PR? It introduces a bug. For instance, I can look at the production version of Daily Minor Planet on my phone and the subject image is scaled correctly. That's changed in this PR.

[eatyourgreens]

I'm not sure. CSS height must always be specified alongside max-height, otherwise the browser calculates the used height, resulting in subjects that change height as you move through a workflow (#6275.) I'd suggest fixing the invalid CSS styles, but I'm not sure what the height should be set to on a phone.

[eatyourgreens]

I'd suggest using maxHeight on smaller screens but that introduces #6061, which makes Squirrel Mapper much harder on a phone.

[eatyourgreens]

I played around with this a bit more tonight but couldn't get it to work on tablet-sized screens.