feat: add max width to blog posts

[ashleysyg]

No description provided.

[github-actions]

Visit the preview URL for this PR (updated for commit d9b3c4a):

https://qa-ccv-brown-edu--pr142-feat-blog-format-as97d1uo.web.app

_{(expires Mon, 05 Feb 2024 19:37:55 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 2def302adddb44a0a1eb29d07c5f8ac902277e8a}

[galenwinsor]

Something funky is happening with the switch to hamburger menu. Did this ever happen before? I'll investigate but you might immediately know what's causing this.

Screen.Recording.2024-01-29.at.2.08.34.PM.mov

[ashleysyg]

which browser are you using? i'm not seeing this behavior on chrome

[galenwinsor]

Okay I discovered a couple things:

• The top red warning banner causes horizontal scrollbar. Adding a width: 100% to that fixes the issue.
• The display: flex on .main-content on the blog page is causing horizontal overflow.
• I think the width: auto on .container might also be causing horizontal scrollbar, but I think removing display: flex on .main-content fixes it.

[ashleysyg]

Okay I discovered a couple things:

• The top red warning banner causes horizontal scrollbar. Adding a width: 100% to that fixes the issue.
• The display: flex on .main-content on the blog page is causing horizontal overflow.
• I think the width: auto on .container might also be causing horizontal scrollbar, but I think removing display: flex on .main-content fixes it.

Which files are you referring to for:

• adding width: 100% to fix horizontal scrolling in status bar
• modifying .main-content

[galenwinsor]

Okay I discovered a couple things:

• The top red warning banner causes horizontal scrollbar. Adding a width: 100% to that fixes the issue.
• The display: flex on .main-content on the blog page is causing horizontal overflow.
• I think the width: auto on .container might also be causing horizontal scrollbar, but I think removing display: flex on .main-content fixes it.

Which files are you referring to for:

* adding `width: 100%` to fix horizontal scrolling in status bar

* modifying `.main-content`

I guess .main-content is defined in _layout.scss and applies a lot of places. Maybe we could just override with another class? But also maybe it's a non issue since you're not seeing it. I'm using Firefox.

[galenwinsor]

LGTM!