adarsh-priydarshi-5646 opened a new issue, #1963: URL: https://github.com/apache/apisix-website/issues/1963
### Current State ## Issue Description The **Plugins Page** has issues with **icon display** and **responsiveness**, causing inconsistent visuals and a poor user experience. --- ## Problem - Plugin icons are not loading or displaying correctly. - Layout breaks on smaller screens. - UI feels inconsistent and unresponsive across devices. --- ## Expected Behavior - All plugin icons should render properly. - The layout should remain responsive on all screen sizes. - User experience should be smooth and consistent. --- ## Possible Cause - Icon rendering logic in `plugin-icon.js` may be outdated or broken. - Missing responsive styles in `plugins.tsx`. --- ## Suggested Fix - Update the **icon rendering logic** in JavaScript. - Improve **the responsive design** of plugin cards. - Optimize **loading mechanism** for icons. --- ## Files to be Modified - `website/static/js/plugin-icon.js` - `website/src/pages/plugins.tsx` --- ## Screenshots of the Change ### **Before Changes** <img width="1510" height="820" alt="Before 1" src="https://github.com/user-attachments/assets/9051bc61-ee7e-4cd0-9ba8-c273c1fb11e6"; /> <img width="1510" height="820" alt="Before 2" src="https://github.com/user-attachments/assets/bcd99e46-d5c7-4cb5-b489-34ef62a7dbfa"; /> <img width="1510" height="820" alt="Before 3" src="https://github.com/user-attachments/assets/9f513565-7784-435a-a122-1dc2ce75bfd2"; /> <img width="1510" height="820" alt="Before 4" src="https://github.com/user-attachments/assets/b4eaa1c9-ae03-404f-b65c-4a850776fae9"; /> --- ### **After Changes** <img width="1510" height="820" alt="After 1" src="https://github.com/user-attachments/assets/6d1041b0-494c-40b2-ab75-71b08b30d439"; /> <img width="1510" height="820" alt="After 2" src="https://github.com/user-attachments/assets/1edc04aa-f1fc-4b0d-bb2e-3dd66fc97acd"; /> <img width="1510" height="820" alt="After 3" src="https://github.com/user-attachments/assets/079431ea-c048-4258-9d28-e8bf54310341"; /> <img width="1510" height="820" alt="After 4" src="https://github.com/user-attachments/assets/9783e0e0-ca04-49ae-a21a-6334e1a5d34c"; /> <img width="1510" height="820" alt="After 5" src="https://github.com/user-attachments/assets/0c4bfffb-cc35-4707-a405-175634079c1c"; /> <img width="1510" height="820" alt="After 6" src="https://github.com/user-attachments/assets/75c6d4d5-0b61-4346-93b2-4b75c844ba40"; /> ### Desired State **Description of the change you are proposing**: This update fixes the **plugin icon rendering** and **UI responsiveness** issues on the Plugins Page. ### What’s Fixed - Corrected plugin icon loading and rendering logic in `plugin-icon.js`. - Improved responsive design for plugin cards in `plugins.tsx`. - Enhanced overall layout and visual consistency across browsers. - Optimized the icon loading mechanism for better performance. ### Expected Outcome - Plugin icons display consistently across all browsers. - The plugins page remains fully responsive on mobile and desktop. - Improved user experience and smoother UI behavior. --- ### 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]
