Remove react-resize-detector

[goplayoutside3]

⚠️ Draft while I investigate how difficult it is to use CSS for resize UX in the remaining components below

Package

app-project
lib-react-components

Linked Issue and/or Talk Post

Ideally we'll be able to close #5859

Describe your changes

It'd be nice to use CSS for styling that's dependent on viewport size (mobile vs desktop) rather than Javascript. This is an experiment removing react-resize-detector from the following components in favor of media queries or container queries:

• ZooHeader
• ProjectHeader

I refactored ZooHeader's unit tests to use composeStory in combo with the variety of existing Storybook components.

How to Review

Both components have robust Storybook components, so it's easiest to run each and try out various screen widths.

I might open a similar PR in the future that uses CSS container queries for FlipbookControls, ImageAndTextControls, and SeparateFramesViewer in the future. Those three use the ResizeObserver API to adjust styling depending on container width.

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

Refactoring

• The PR creator has described the reason for refactoring
• The refactored component(s) continue to work as expected

[coveralls]

coverage: 81.176% (-0.02%) from 81.195%
when pulling d709536 on remove-resize-detector
into fd8b985 on master.

[goplayoutside3]

Note to self - pausing for a moment to investigate styled-components v6. I tried using Container Queries in ProjectHeader, but I'm not positive v5 supports them.

Edit: We're waiting on Grommet to release a version that works with styled-components v6. Grommet v2.35.0 is in the works.

[goplayoutside3]

Closing this in favor of revisiting after we've upgrade to styled-components v6.