Fix navigation arrow overlap in About dialog

[nishtha-agarwal-211]

Fixes: #5290

Summary

Fixes a UI bug where the navigation arrows overlap the text content in the About dialog.

Explanation

Why the overlap was happening

• The left/right navigation arrows are positioned absolutely within the About dialog.
• The content container (#helpBodyDiv) had no horizontal padding reserved for the arrows.
• As a result, text flowed to the edges and appeared underneath the arrows on multiple screen sizes.

What this fix does

• Adds horizontal padding to #helpBodyDiv to create safe spacing zones for the arrows.
• Adjusts widths proportionally to maintain a consistent content area.
• Ensures the fix works across common responsive breakpoints.

Padding values used:

• Desktop: 60px
• Tablet (≤ 450px): 45px
• Small mobile (≤ 320px): 40px
• Mobile (< 600px): 50px

---

Code Changes

• File modified: css/activities.css
• CSS-only changes across responsive breakpoints
• No JavaScript behavior modified

---

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[chimosky]

Not reviewing what you've done, but you could write better commit messages.

A lot of your opening comment should be in the commit messages, see making commits.

[haroon10725]

Please don't push the formatting changes.

[nishtha-agarwal-211]

Thanks for the feedback!

Noted on the commit messages — I understand that they should be more
descriptive and capture more of the context. I’ll keep that in mind
and improve them in future contributions.

Regarding formatting changes, thanks for pointing that out.
I’ll be more careful to avoid unintended formatting-only changes
in follow-up PRs.

[github-actions]

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

abc.test.js

[haroon10725]

@walterbender I think we have merged the fix, so should we close the PR?

[nishtha-agarwal-211]

Thanks for checking! Yes, the fix has already been merged via another PR, so this PR can be closed.