Redesign and rewrite mobile styling

[anth-volk]

This commit reworks our current mobile styling templates so as to make the site more mobile-friendly. Fixes #844 and #877.

In my opinion, this should be pushed after #867. After #867, this PR will likely face merge conflict errors, at which point I would need to fix the buttons (as #867 changes the default button padding and renames/rewrites certain buttons). This PR is built with those changes in mind, which is why if you preview this commit off that branch, certain buttons are slightly off padding-wise.

🤖[deprecated] Generated by Copilot at 5a4cfe7

Summary

📱🔎♻️

This pull request improves the responsiveness, usability, and modularity of the policy engine app, especially for mobile devices. It refactors the policy and household calculator pages, extracts and adds props to some components, adjusts the styles and layouts of some components, and hides or deletes some redundant components. It also removes some whitespace in a markdown table in a blog post.

We're the masters of the grid, we flex our styles with skill
We search and edit variables, we shape the policy at will
We optimize for mobile devices, we make the calculators shine
We're the PolicyRightSidebar, we're the rulers of the line

Walkthrough

• Add moreOnClick prop to NavigationButton component to enable extra functionality on click (link, link)
• Adjust marginTop style of VariableEditor component for mobile devices (link)
• Hide BottomCarousel component for mobile devices in HouseholdOutput and PolicyOutput components (link, link)
• Use useDisplayCategory hook to get display category based on window width and adjust fontSize and flexDirection styles accordingly in NetIncomeBreakdown and CalculatorInterstitial components (link, link, link, link, link, link, link)
• Change layout of PolicyRightSidebar component from flex to grid and remove or modify margin styles of SearchOptions and PolicySearch components (link, link, link, link)
• Move ParameterSearch component from PolicyPage to controls folder and add callback prop (link, link)
• Rename MobileHouseholdPage component to MobileCalculatorPage and move it to layout folder (link)
• Use MobileCalculatorPage component for both household and policy calculators and pass type prop (link, link, link)
• Add callback prop to VariableSearch component (link, link)
• Remove whitespace in markdown table of Budgetary impacts section in autumn-statement-2023 post (link)
• Delete src/pages/household/MobileHouseholdPage.jsx file (link)

[nikhilwoodruff]

Some comments here- looks amazing.

• Can we get the chart to fill the space sensibly?

• Can we use the drawer from antd for the new menu?

• Can we avoid centering horizontally?

[anth-volk]

I'm going to convert this to a draft PR so that it doesn't re-run actions every time I commit

[anth-volk]

A Loom video of what these edits do in mobile is available at https://www.loom.com/share/4af0bc7cae8d435d9f51c0e0549c50a9?sid=c2b00346-ad40-4fab-8adc-bfff547b78bb. Please note that the reason there are two scroll boxes at some points in the video is that I selected a simulated mobile device longer than my desktop browser screen.

[anth-volk]

@nikhilwoodruff was hoping you might be able to review this second round of edits.

[nikhilwoodruff]

Video looks great- thanks @anth-volk!