Survey task: increase task area width to 540px for workflow with survey task

[seanmiller26]

Package

Choose from the list:

• [ ] app-content-pages
• [ ] app-project
• [x] lib-classifier
• [ ] lib-panoptes-js
• [ ] lib-react-components
• [ ] unknown

Is your feature request related to a problem? Please describe.

Allow more space for the task area and its components. In turn, this helps with #6210 when the task is a Survey.

Describe the solution you'd like

Increase the task area to be 540px. Figme for reference https://www.figma.com/design/ASqNlLhicNRzEDhYDA2t8j/Survey?node-id=65-1006&m=dev&t=PxDxXDB67AH8V9Aa-1 Specific margins and other annotations here:

Additional context

Add any other context or screenshots about the feature request here.

[mcbouslog]

@seanmiller26 - for a workflow with multiple steps, should the increased task area width apply to steps without a survey task or only to a step with a survey task?

[seanmiller26]

Yes, we should keep the task area a consistent size, if possible.

[mcbouslog]

@seanmiller26 - currently the subject viewer and task area layout goes from horizontal to vertical at 768px (small breakpoint). Should the subject viewer and task area change from horizontal to vertical at a different breakpoint with these changes?

The Grommet ResponsiveContext medium breakpoint discussion could be applicable to this issue.

[seanmiller26]

Yes, this is something I'd like to explore with this task as a pathfinder for other task types. I think best to move forward with the initial styling in this issue. Then I can try it out on staging and I'll be able to make a more informed decision once I can play around with it.

[goplayoutside3]

@mcbouslog there was recent discussion about unexpected changes to task area styling when going back and forth between task types in this Issue: https://github.com/zooniverse/front-end-monorepo/issues/6271#issuecomment-2335148214

Not caused by any changes to the survey task code, but I want to link it here in case it's worth considering better management of task area styling in general.

[eatyourgreens]

Hi, I’ve moved that conversation from #6271 to #6275. It’s a bug in the single image viewer styling, when ‘limit subject height’ is enabled. The viewer is styled with max-height, so the browser is free to render it at any height smaller than that value.