Fix integrations honeycomb layout and improve mobile usability #7337
Description
Current Behavior
On this page: https://layer5.io/cloud-native-management/meshery/integrations, especially on mobile devices, the integration logos are displayed one per row, resulting in excessive vertical scrolling. Additionally, the hover-based interaction is not user-friendly on mobile, preventing users from viewing integration descriptions.
On desktop (as well as on mobile), several integrations share the same logo image. To distinguish between them, users must hover over each logo, which is not always intuitive.
Desired Situation
- Display at least two integration logos per row on mobile to reduce scrolling.
- Show the integration description below each logo on both desktop and mobile. A visual separator (e.g., a horizontal line) can be used between the logo and the text.
- Truncate the description text if it exceeds three lines to maintain a consistent card height.
- Remove the hover effect and the animation.
Why these changes should be implemented together
Placing the integration description below the logo can affect the card dimensions. To maintain a balanced layout, especially on mobile, it would be preferable to slightly increase the card height rather than its width. Implementing these changes together ensures visual consistency and improves usability across screen sizes.
Images
- Mobile view
- Desktop
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.
- 📚 See contributing instructions.
- 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
- 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.
Join the Layer5 Community by submitting your community member form.