fix(responsive): ensure info pop-up fits on all screens. Closes #626

[pari-dubey1]

Description

This pull request fixes issue #626, where the information tooltip for ingredients would overflow the side of the screen.

Type of change

• Bug fix
• New feature
• Improvement
• Documentation update

How Has This Been Tested?

I have tested this change manually on my local machine. I confirmed that:

• On large desktop screens, the tooltip no longer overflows when the icon is near the edge.
• On small mobile screens, the tooltip no longer overflows when the icon is near the edge and stays within the viewport.
• The tooltip remains correctly positioned above its icon on all screen sizes.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code where necessary
• I have added tests that prove my fix is effective or that my feature works
• I have made corresponding changes to the documentation

[github-actions]

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼