search

zooniverse / front-end-monorepo

A rebuild of the front-end for zooniverse.org
https://www.zooniverse.org
Apache License 2.0
104 stars 29 forks source link

Limit subject height shrinks subjects too much on small screens #6061

Open eatyourgreens opened 6 months ago

eatyourgreens commented 6 months ago

Package

Describe the bug

Some of the Squirrel Mapper subjects are now very small on mobile, an unintended consequence of the new image sizing styles?

Squirrel Mapper on my phone, with a subject image that's only about half the width of the screen.

To Reproduce

Visit the squirrel workflow on a phone. You might have to refresh a couple of times in order to get a small image.

Expected behavior

Subject images should fill the width of the screen on a phone, in portrait orientation.

Device information

Smartphone (please complete the following information):

eatyourgreens commented 1 month ago

Bumping this because it’s still a problem, almost 6 months later. https://www.zooniverse.org/projects/bcosentino/squirrelmapper/classify/workflow/20578

eatyourgreens commented 1 month ago

Here’s the same bug on Science Scribbler, with a tablet-sized screen. In the single column layout, the subject doesn't expand to fill the available space.

Correct-a-cell on a tablet-sized screen. The layout is a single column, but the subject image only fills about half the width of the screen.
eatyourgreens commented 1 week ago

I just triggered this bug on Squirrel Mapper, but this time I remembered to save the subject ID: 103856571.

This link should reproduce the bug on a small screen: https://www.zooniverse.org/projects/bcosentino/squirrelmapper/classify/workflow/20808/subject/103856571

Squirrel Mapper on an iPhone. The subject photo is only about half the width of the screen, with large, empty margins on either side.

Here's that same page in desktop Firefox, so this isn't a Safari or iOS bug.

Squirrel Mapper in a narrow window in desktop Firefox. The subject is less than half of the available screen width, in the single column classifier layout.

The subject image is 640px wide, so easily big enough to fill the width of the screen on a phone or small tablet.

Squirrel Mapper subject 103856571: a squirrel in a tree.
eatyourgreens commented 1 week ago

The bug goes away when the subject viewer has a banner.

Squirrel Mapper again, but this time the subject photo has an Already Seen banner. When the banner is present, the subject image fills the available screen width on a small screen.
eatyourgreens commented 1 week ago

Here's another example that just came up on Squirrel Mapper, subject 103863673.

https://www.zooniverse.org/projects/bcosentino/squirrelmapper/classify/workflow/20808/subject/103863673