adarsh-priydarshi-5646 opened a new issue, #1965: URL: https://github.com/apache/apisix-website/issues/1965
### 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/ **Screenshots (if relevant)**: <img width="1510" height="824" alt="Image" src="https://github.com/user-attachments/assets/ec9dfe1a-2f12-4951-b8b8-75c6f261f91a"; /> <img width="1510" height="824" alt="Image" src="https://github.com/user-attachments/assets/28333536-b4d9-4f75-a7c6-106e8c3c6076"; /> ### 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 -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
