Brenosalv/feature/implement-a-max-width-for-the-site

[Brenosalv]

Issues:

https://github.com/estuary/marketing-site/issues/255 https://github.com/estuary/marketing-site/issues/275

[github-actions[bot]]

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

https://estuary-marketing--pr284-brenosalv-feature-im-qjveud3g.web.app

_{(expires Sun, 09 Jun 2024 02:43:11 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 76f6b095a0752e5d9c6c890267f9fdc3e392161e}

[Brenosalv]

Just correcting: The commit 7dd6061 was for the connector template, not blog post template.

[travjenkins]

Integration pages with source and destination selected are too wide

[travjenkins]

The 404 page does not follow the width

[travjenkins]

When selecting source and destination the images can quickly get way too small. I think we need to make sure that "column" does not shrink down too much with the new width

[travjenkins]

https://estuary-marketing--pr284-brenosalv-feature-im-qjveud3g.web.app/integrations/datadog-ingest-to-google-cloud-sql-sqlserver/

You need to use ones with longer names to see the issue

[travjenkins]

If we turn off nowrap on the text I think it looks okay -

[Brenosalv]

If we turn off nowrap on the text I think it looks okay -

Thanks, Travis, that's exactly the solution.

[travjenkins]

Sorry - found one more while testing on my home machine.

We should mark these connector icons with hardcoded width and height? However, that can cause the chips to overflow

If we allow the flex items to wrap and align them to the end it looks okay

I am not super strong about any specific solution though - just wanted to leave a basic idea of a quick solution

[Brenosalv]

Sorry - found one more while testing on my home machine.

We should mark these connector icons with hardcoded width and height? However, that can cause the chips to overflow

If we allow the flex items to wrap and align them to the end it looks okay

I am not super strong about any specific solution though - just wanted to leave a basic idea of a quick solution

I see it's an issue already present in production. I like your solution but I prefer besides adding a max-width 55px to the icons, also adjusting the grid to become 3 columns earlier. Please let me know what you think about this solution. I just pushed a new commit.