fix: Optimize UI for smaller screens (#1220)

[Kiryous]

Closes #1220

📑 Description

Fix overflow, padding, and other issues that occur on smaller screens (<1280 px):

• page-container and card-container classes were introduced to unify the paddings
• min-w-0 added to places where the overflow of flex container happened
• fallback to one column where appropriate

Known issues:

• new container classes may not be updated everywhere yet
• there's room for further changes requiring design decisions; intentionally left them for the follow-up PRs

✅ Checks

• [x] My pull request adheres to the code style of this project
• [ ] My code requires changes to the documentation
• [ ] I have updated the documentation as required
• [ ] All the tests have passed

ℹ Additional Information

Watch Loom with comparison

[vercel[bot]]

@Kiryous is attempting to deploy a commit to the KeepHQ Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

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

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
keep	⬜️ Ignored (Inspect)	Visit Preview		Aug 26, 2024 2:25pm

[talboren]

@Kiryous it seems like for some reason there is some E2E test failing due to the changes introduced in this branch. Can you please see if you can fix it?

[Kiryous]

@talboren hey! yeah, I noticed it, but it seems bug in tests rather than bug in code, since I could see the provider's card in headful mode. But maybe I'm wrong. I'm out on vacation till August 23, and could look into it on return.

[Matvey-Kuk]

@Kiryous we're kinda blocked from merging this while it's breaking tests anyway :(

[talboren]

@Kiryous @Matvey-Kuk I'm closing this PR for now as it is stale and we can re-open it once @Kiryous is able to fix the small issue here. 🙏🏼

[Kiryous]

lgtm

@talboren thanks for reviewing and approving. Do not merge yet, please, wanna make a few minor additions

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 30.66%. Comparing base (6d5c759) to head (4b84014). Report is 6 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1491      +/-   ##
==========================================
- Coverage   30.68%   30.66%   -0.02%     
==========================================
  Files          54       54              
  Lines        5028     5031       +3     
==========================================
  Hits         1543     1543              
- Misses       3485     3488       +3     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[Kiryous]

@talboren added a fix so tiles of linked providers won't jump on hover. good to go!

[Kiryous]

@Matvey-Kuk it seems the merging is blocked because the Vercel deployment is need authorization. Could you please authorize it?

[Matvey-Kuk]

@Kiryous congrats and thank you for the contribution! <3