refactor: fix readme button hidden cookiebanner

[kelvinscuesta]

Closes #4128

1. Move read more button into a container to allow for flexbox to handle sizing and spacing
2. Fix width sizing on mobile, tablet, and ultra wide screens of the introduction on landing page

Not sure how to run tests or when to add them so please feel free to comment or feedback!

Backend checklist

• Formatted my code by running ruff check --select I --fix . && ruff check . && ruff format . in app/backend
• Added tests for any new code or added a regression test if fixing a bug
• All tests pass
• Run the backend locally and it works
• Added migrations if there are any database changes, rebased onto develop if necessary for linear migration history

Web frontend checklist

• Formatted my code with yarn format
• There are no warnings from yarn lint --fix
• There are no console warnings when running the app
• Added tests where relevant
• All tests pass
• Clicked around my changes running locally and it works
• Checked Desktop, Mobile and Tablet screen sizes

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
couchers	✅ Ready (Inspect)	Visit Preview	Feb 11, 2025 6:47pm

[nabramow]

What's this for? Was this on purpose?

[nabramow]

Heyyo you can run the tests via yarn test! All the scripts we have are in the package.json under scripts also for future reference!

[nabramow]

Okay just pulled the branch to take a look! I'm still seeing the "Read More" button covered by the cookie banner on Desktop, and the little arrow is touching the border now:

Looking at the ticket again, we might have wrote it confusingly as the example design is actually in the comments (if so sorry ooops). "Read More" should be moved to the left below "Free forever. Community-led. Non-profit. Modern" like this:

Any questions, just shout!

[nabramow]

Don't forget to put this in i18n instead (the translation tool). If you search i18n you should find some examples.

[nabramow]

Same here with translation

[nabramow]

Location looks good and it's working! Just one small UI thing: When I hover it adds a big square of a slightly green background color. Would you mind removing the background color on hover and just have it be cursor: pointer?

Screen.Recording.2025-02-12.at.5.59.06.PM.mov