Current State

Description of the current state/issue:

The current code samples table on /docs/general/code-samples/ has several usability issues:

• Table columns are not fully visible on small devices without horizontal scrolling
• Text overlap occurs on mobile screens, making content unreadable
• No sticky column functionality for context preservation during scroll
• Inconsistent responsive behavior across different device sizes
• Poor user experience on mobile devices when accessing all 7 table columns

Proposed Solution

Implement comprehensive responsive table enhancements to improve accessibility and user experience across all device types:

Desktop & Large Screens (>1024px)

• All 7 columns visible without horizontal scrolling
• Proper table centering and positioning
• Enhanced column widths for better content display

Tablets (601px - 1024px)

• Responsive layout with text ellipsis for overflow content
• Fixed table layout to fit all columns within screen width
• No horizontal scrolling required

Mobile Devices (≤600px)

• Horizontal scroll functionality with touch optimization
• Sticky first column (Title) for context preservation during scroll
• Text wrapping enabled for long content in Description, Source code, Tutorial, and Category columns
• All 7 columns accessible via smooth horizontal scrolling
• Visual separators between columns for better content organization

Expected Outcome

• Improved user experience across all device types
• Full accessibility to all table content on mobile devices
• Professional appearance with modern responsive design
• Better readability with proper text wrapping and spacing
• Smooth horizontal scrolling experience on touch devices

Files to be Modified

• [website/src/css/customTheme.scss]
• [website/docs/general/code-samples.md]

Link to the page:
https://apisix.apache.org/docs/general/code-samples/

Before vs After Screenshots

Before

After

Desired State

Description of the change you are proposing:

This PR enhances the code samples table with comprehensive responsive design and improved mobile accessibility. The changes address usability issues on small devices and provide a better user experience across all screen sizes.

Would you like to fix this issue?

Yes! Count me in