Repository navigation
[Site]: Enhance code samples table with responsive design and horizontal scroll for mobile devices #1965
Description
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
Activity
pushkerWebs commentedon Nov 2, 2025
Hey I’d love to take this issue. I have experience with responsive design and can implement the sticky column, horizontal scrolling, and text wrapping as described i’ll ensure the table adapts smoothly across desktop, tablet, and mobile views.
Please assign me this issue
aryashi100 commentedon Nov 2, 2025
Hello , I’d like to work on this issue.
I’ve reproduced the table responsiveness problems on small screens (text overlap, lack of sticky columns, etc.).
My plan is to:
1.Make the table horizontally scrollable on mobile devices,
2.Add sticky first column for better context,
3.Ensure responsive layout using CSS grid or flexbox.
Could you please confirm if this approach aligns with what the team expects?