Redesign question page

[jacbn]

The designs are not quite finalised yet; will remove commented code once complete.

[codecov]

Codecov Report

Attention: Patch coverage is 17.54386% with 47 lines in your changes missing coverage. Please review.

Project coverage is 36.42%. Comparing base (612a564) to head (2a70d46).
Report is 12 commits behind head on redesign-2024.

Files with missing lines	Patch %	Lines
src/app/components/pages/Question.tsx	5.26%	18 Missing ⚠️
src/app/components/elements/PrintButton.tsx	16.66%	10 Missing ⚠️
src/app/components/elements/ReportButton.tsx	22.22%	7 Missing ⚠️
src/app/components/elements/AffixButton.tsx	16.66%	5 Missing ⚠️
src/app/components/elements/ShareLink.tsx	50.00%	2 Missing ⚠️
src/app/state/selectors.tsx	0.00%	2 Missing ⚠️
...rc/app/components/elements/cards/GameboardCard.tsx	0.00%	1 Missing ⚠️
...rc/app/components/elements/svg/DifficultyIcons.tsx	50.00%	1 Missing ⚠️
src/app/components/pages/Concept.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@                Coverage Diff                @@
##           redesign-2024    #1325      +/-   ##
=================================================
- Coverage          36.46%   36.42%   -0.04%     
=================================================
  Files                476      476              
  Lines              21105    21142      +37     
  Branches            6989     7006      +17     
=================================================
+ Hits                7695     7702       +7     
- Misses             12753    12783      +30     
  Partials             657      657              

☔ 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.

[sjd210]

A couple of small things but much cleaner! It's nice seeing major pages like this come together 🥳

(Not actually touched on here and we've already discussed in-person briefly, but to note it somewhere): I really don't like how hints are displayed on single-part questions. Without a background to act as enclosure, they feel too disconnected from the Hint buttons - especially with the page credit right below.

On a similar note, expanding these hints on <= "sm" screens causes the buttons to rise rather than the buttons remaining stationary and the hint contents coming down. I've at least figured out the specific problem in this case is to do with the sidebar layout and order-0/order-1 classes. If the main content is first in HTML-order and page-order, this problem doesn't exist, but being first in page-order but second in HTML-order causes this weird rendering. It might be worth enforcing this ordering for content sidebars in TypeScript directly rather than CSS.