style: add containers around central content in discovery app #376

mradamcox commented 1 week ago

This PR adds two internal containers around the content within the discovery app search bar, and the middle content below. This isn't a significant change, but will help the layout stay contained on very wide screens, and I believe create a little better foundation for improving the mobile view down the road.

To test: https://deploy-preview-378--cheerful-treacle-913a24.netlify.app/search

Zoom out your browser to (basically) mimic a very widescreen, you'll see the central content to be contained now and not spread to fill the entire page.
Zooming in/out should have a generally smooth transition flow.
Mobile is not done but there are some small improvements.

Compared against: https://discovery-app--cheerful-treacle-913a24.netlify.app/search

netlify[bot] commented 1 week ago

Deploy Preview for cheerful-treacle-913a24 ready!

Name	Link
Latest commit	ecaa4ac0873170f6bcb825b322c036044c349b98
Latest deploy log	https://app.netlify.com/sites/cheerful-treacle-913a24/deploys/67353b8335fe8700086edccd
Deploy Preview	https://deploy-preview-378--cheerful-treacle-913a24.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

mradamcox commented 1 week ago

Good catch on the left padding, I've adding another container in the middle section to properly match the banner section. You're right that the center gap is smaller, but looking back at the original Figma designs, it's actually even smaller there: So I think this small change should be fine.

healthyregions / SDOHPlace