adarsh-priydarshi-5646 opened a new pull request, #1966:
URL: https://github.com/apache/apisix-website/pull/1966
Fixes: #1965
## Description
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.
## Changes Made
### Responsive Design Implementation
- Added responsive CSS media queries for different device categories
(desktop, tablets, mobile)
- Implemented horizontal scroll functionality specifically for small devices
(≤600px)
- Enhanced table positioning and centering for desktop and large screens
### Mobile Device Enhancements
- **Horizontal Scroll**: Added touch-optimized horizontal scrolling for
mobile devices
- **Sticky First Column**: Title column remains visible during horizontal
scroll for context preservation
- **Text Wrapping**: Enabled text wrapping for Source code, Tutorial,
Description, and Category columns
- **Increased Table Widths**: Ensured all 7 columns are accessible via
horizontal scroll
- Large Mobile (481px-600px): 1400px table width
- Standard Mobile (321px-480px): 1300px table width
- Small Mobile (≤320px): 1200px table width
### Visual Improvements
- Added visual separators between columns for better content organization
- Fixed text overlap issues with proper column spacing and padding
- Implemented clean link hover effects (color change only, no background
effects)
- Added dark mode compatibility for link styling
## Cross-Device Compatibility
- **Desktop/Large Screens**: All columns visible without scrolling, enhanced
column widths
- **Tablets**: Responsive layout with text ellipsis for overflow content, no
horizontal scroll needed
- **Mobile Devices**: Full horizontal scroll access to all 7 columns with
sticky first column
## Files Modified
- [website/src/css/customTheme.scss]
- [website/docs/general/code-samples.md] - Minor content improvements
## Before vs After
- **Before**: Table columns cut off on Desktop & mobile, text overlap, poor
readability
- **After**: All 7 columns accessible, smooth horizontal scroll, no text
overlap, better readability
# **Before vs After Screenshots**
## **Before**
<img width="1510" height="824" alt="Screenshot 1"
src="https://github.com/user-attachments/assets/e6fcf5e6-8120-4249-9d2e-09ae19af1dd5";
/>
<img width="1510" height="824" alt="Screenshot 2"
src="https://github.com/user-attachments/assets/c7040561-4bf3-4f0f-b521-2216485fb6c1";
/>
## **After**
<img width="1510" height="801" alt="Screenshot 3"
src="https://github.com/user-attachments/assets/8ab2fdf8-9284-4b4d-a2f1-ebe1f62d736d";
/>
<img width="1510" height="824" alt="Screenshot 4"
src="https://github.com/user-attachments/assets/27589476-b666-4b25-8531-616eb9d38a1b";
/>
## Testing
- Tested across multiple screen sizes and breakpoints
- Verified horizontal scroll functionality on touch devices
- Ensured sticky column behavior works correctly
- Confirmed text wrapping improves readability for long content
- Validated link hover effects in both light and dark themes
--
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]
