fix: Improve mobile 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 250+ lines of mobile-responsive CSS
• docusaurus.config.js - Added viewport meta tag configuration

Related Issues

Closes #269

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	afdae01
🔍 Latest deploy log	https://app.netlify.com/projects/learn-open-source/deploys/69065bd99657f10008469ff7
😎 Deploy Preview	https://deploy-preview-294--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.

[adiati98]

Hey @mohamedhadri,

Thanks for the PR!

I want to address some things here:

1. I see that the code block buttons are now visible on the small screen. Thanks!

2. Do we need all the !important here? It seems some of them are causing new issues, such as:

   • The logo at the footer become much bigger

   • The previous and next page navigations are cut off

     Before:

     

     After:

     

3. The code block overflow is not addressed yet. You might want to visit the overflow CSS property to achieve this.

Can you please address these? Thank you.

[BekahHW]

@mohamedhadri if you can commit to fixing these issues, I'll go ahead and put a hacktoberfest-accepted label on it so you can get credit.

[mohamedhadri]

hey @BekahHW, @adiati98, I took notes on the issues that you clarified and I will start working on them ASAP.

[mohamedhadri]

hey @adiati98,
I pushed a new commit now and here is the summary of it:

• Fixed Footer Logo Size on Mobile
  The footer logo was oversized on mobile devices. It's now properly constrained to a maximum width of 72px for better visual balance:

• Restored Navigation to Original Design
  The navigation menu has been restored to its original appearance while maintaining mobile responsiveness:

-Enhanced Code Block UX on Mobile - Word Wrap Enabled by Default
Implemented automatic word wrap activation for code blocks on mobile devices. This significantly improves readability by eliminating horizontal scrolling. The word wrap button is now toggled on by default when viewing on mobile screens (≤ 996px width):