add a default collapsed

[meganrm]

Problem

On mobile the app is pretty unusable because the panels are open by default and overlap each other.

Blair has QR codes on her poster

Solution

The collapsed state on the side panels is initialized based on the window size. This means that it's only set on load, it's not set as a listeners. So if a user did the strange thing of loading the app on their computer, and then make the browser window tiny, it won't auto close the panels unless they re-load at the smaller size

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)

Steps to Verify:

1.npm start
2. make the screen mobile sized and reload
3. the panels should initialize to closed
4. make the screen normal screen sized and reload
5. the panels should initialize to open

Screenshots (optional):

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	75.3% (+0.03% 🔼)	558/741
🟡	Branches	70.64%	77/109
🔴	Functions	42.61%	75/176
🟡	Lines	73.89% (+0.04% 🔼)	501/678

Test suite run success

90 tests passing in 7 suites.

Report generated by 🧪jest coverage report action from b16a911

[meganrm]

[toloudis]

LGTM