Adjust layout slightly for small (/non-fullWidth) ALVIs

[sjd210]

At explicitly small ALVI widths (when page is <=xs, or fullWidth set to exactly false), wrap title tags such as "DEPRECATED" and "NO-FILTER" to below the title so they take up less horizontal space.

Also change fullWidth requirements on "My progress" from <=lg to {sm, lg, xl} to allow md pages to use a non-stacked layout (at full page-width), while also enabling it for xl pages to account for the new question status space requirements (at half page-width).

Also requires isaacphysics/isaac-api#760

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 43.22%. Comparing base (eac22a6) to head (0ac2652).
⚠️ Report is 32 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2006      +/-   ##
==========================================
+ Coverage   43.19%   43.22%   +0.02%     
==========================================
  Files         575      575              
  Lines       24747    24747              
  Branches     8216     7343     -873     
==========================================
+ Hits        10689    10696       +7     
- Misses      13382    14002     +620     
+ Partials      676       49     -627     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[jacbn]

I'm okay with this in terms of it working, but I'm really not keen on having a bunch of exceptions at specific screen sizes owing to page layouts changing – if we ever change the sidebar layout, this'll all need to change too. I think this would be much improved with a container-based CSS approach, where the layout responds to the size of the list view object rather than the screen size. We do something similar for event cards, question metadata and a couple of other things. See example here. With this, I should think we can just say "if the object width is below a certain threshold, wrap the tags and auto-set full width", and we won't need e.g. the forceFullWidth map.

I'd be happy to merge this as is but create a card to rework list views into this container-based approach (the scope is much larger than just this adjustment PR), if you agree that it's a good way forwards. What do you think?

[jacbn]

I don't love false and undefined representing different things for a boolean option, but we wouldn't need this at all with the container approach so I'm happy to leave it as is for now.

[sjd210]

@jacbn I'll admit that this was a little hackier than I'd've liked. My original intention had just been changing the fullWidth breakpoints for MyProgress to go along with the main API change, but testing it with busier ALVIs is what broke things and I went with a simple change as it only (currently) affects progress. I'm aware of the container-based approach, and it definitely seems a more sensible solution going forward - I'm in full support :)

[jacbn]

Perfect, let's do that then – I'll make a card.