fix(mobile): improve responsiveness and code block button visibility

[mohamedhadri]

Description

This PR fixes mobile responsiveness issues by implementing comprehensive CSS improvements and configuration updates to enhance the documentation site's usability on mobile devices. The changes ensure proper display, prevent horizontal scrolling, and improve accessibility for users on phones and tablets.

Key Improvements:

Mobile Responsiveness and Usability:

• Made code block copy buttons and button groups always visible on mobile devices (no hover required), enabling users to easily copy code and prevent horizontal scrolling
• Added comprehensive mobile-specific CSS rules (@media max-width: 996px) for:
  • Navigation menus with better touch targets (minimum 44px for accessibility)
  • Responsive images that scale properly without causing overflow
  • Horizontally scrollable tables on mobile
  • Optimized typography with adjusted heading sizes and line heights
  • Improved sidebar layout and spacing
  • Better button and interactive element sizing
  • Enhanced footer layout for small screens
  • Prevention of horizontal scroll with proper overflow handling

Configuration Enhancements:

• Updated docusaurus.config.js to include a viewport meta tag ensuring proper scaling and rendering on mobile devices

Files Modified:

• src/css/custom.css - Added 200+ lines of mobile-responsive CSS
• docusaurus.config.js - Added viewport meta tag configuration

Related Issues

Closes #297

Mobile & Desktop Screenshots/Recordings

Before: Code block buttons invisible on mobile, horizontal scrolling required
After: Buttons always visible, no horizontal scroll, properly scaled images and layout

Steps to QA

1. Open the documentation site on your browser
2. Switch to mobile view (DevTools > Toggle device toolbar) or test on actual mobile device
3. Navigate to any page with code blocks (e.g., "How to Contribute to Open Source")
4. Verify that copy/wrap buttons are visible without hovering
5. Check that code blocks don't cause horizontal scrolling
6. Test image scaling - all images should fit within viewport
7. Open the navigation menu - verify touch targets are adequate (easy to tap)
8. Test table scrolling - tables should scroll horizontally if needed
9. Verify no horizontal scroll on any page
10. Check that all interactive elements are easily tappable

Test on multiple screen sizes:

• Mobile (320px - 480px)
• Tablet (768px - 996px)
• Desktop (997px+)

What GIF best describes this PR or how it makes you feel?

Because now mobile users can actually read the docs without doing the horizontal scroll dance! 📱✨

[netlify]

✅ Deploy Preview for learn-open-source ready!

Name	Link
🔨 Latest commit	2e79e5c
🔍 Latest deploy log	https://app.netlify.com/projects/learn-open-source/deploys/68f3cffd0a81b6000886be28
😎 Deploy Preview	https://deploy-preview-293--learn-open-source.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

PR Compliance Checks

Thank you for your Pull Request! We have run several checks on this pull request in order to make sure it's suitable for merging into this project. The results are listed in the following section.

Protected Branch

In order to be considered for merging, the pull request changes must not be implemented on the "main" branch.
We would suggest that you close this pull request, create a new branch, implement your changes, and open a new pull request.

Watched Files

This pull request modifies specific files that require careful review by the maintainers.

Files Matched

• package-lock.json

[github-actions]

Congratulations on submitting your first Pull Request! 🎉

We appreciate your contribution. Feel free to join the conversation in our
Community and say hello!

[adiati98]

Hey @mohamedhadri,
Thank you for taking on this! We appreciate your contribution. ✨

However, we will close this PR with following reasons:

1. You made changes directly on the main branch and we don't allow that.
2. You modified the package-loc.json. We don't want to change anything in this file.

Please refer to this bot warning messages. For the next, kindly address all bot warnings until the check pass.

That said, you need to create a new branch to work on changes and don't add and commit the changes in package-lock.json.
Also, because this is UI changes, please provide the before and after screen recordings or screenshots in your new PR.