[Feature]: Display a "Not Optimized for Mobile" overlay to users trying to access Agenta app from browsers with narrow width

[ardaerzin]

closes AGE-1407

What has changed?

• new component has been created to display a message to users accessing Agenta from browsers with narrow viewports.

What else?

• minor improvement to the shared useResizeObserver hook so that it can observe an element passed as an argument. Useful to observe window size changes

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
agenta	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 5, 2024 3:32pm
agenta-documentation	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 5, 2024 3:32pm

[sentry-io]

🔍 Existing Issues For Review

Your pull request is modifying functions with the following pre-existing issues:

📄 File: agenta-web/src/pages/_app.tsx

Function	Unhandled Issue
App	TypeError: Cannot destructure property 'Component' of 'undefined' as it is undefined. GET /_next/static/chunks/pa... Event Count: 3 Affected Users: 0

---

_{Did you find this useful? React with a 👍 or 👎}

[mmabrouk]

Thank you @ardaerzin . I have QA'ed this and it works fine!

[ashrafchowdury]

Thanks for the PR @ardaerzin.

LGTM!