Layout issues on narrow (read: mobile) screens

[official-sounding]

Describe the bug
On a specific post page, eg https://ask.metastaging.net/2504/does-this-work
When in the "mobile" regime (below 650 px width), on a chrome-based browser, the following issues occur:

• The announcements bar clips instead of wraps
• The "you aren't logged in" header wraps in the middle of the "log in" button
• when header announcements bar is collapsed, the "expand" button clips the search bar

Additionally, on both chrome & firefox based browsers:

• There is a horizontal scrollbar because the "navigate to footer" button is placed outside of the width of the screen Split out to separate issue Horizontal Scrollbar #76
• Notification banners (like "you are not logged in" and "this post has been archived") wrap in the middle of their available space unnecessarily
• The footer only occupies about a third of the overall space

To Reproduce
NA (see above)

Expected behavior

Screenshots
(chrome on the left, firefox on right)

Desktop (please complete the following information):

• OS: Windows 11
• Browsers: Chrome (current) & Firefox (current)

(also tested on Chrome for Android on a Pixel 6, got similar results to Desktop Chrome)

Additional context
I think it's important to focus on performance and mobile usecases throughout the build process, otherwise trying to bug-squash for mobile use cases will cause churn and regressions in desktop usecases. Better to continuously test on both use-cases throughout the build to ensure things work in both.