[Bug] DataCard checklist items overlap, wrap awkwardly, and icons shrink on tablet/mobile viewports #8119

Description

On individual integration pages (e.g., /cloud-native-management/meshery/integrations/gitlab-controller), the feature checklist inside the dark card (DataCard) under the "Kubernetes Orchestration and Diagramming software" section displays cramped, overlapping items on tablet and mobile viewports (such as iPad Mini at 768px and Surface Pro at 912px).
Because the two columns are constrained to ~350px total card width without proper grid gaps or icon shrink protection:

• Long text strings like "Infrastructure orchestration" and "Extensive library of integrations" wrap into 3–4 tight lines and collide with the adjacent column.
• The checkmark icons get squashed/distorted due to missing flex-shrink: 0.
• The icons are vertically centered across multi-line text blocks instead of staying anchored to the top line.

Expected Behavior

• Icon Alignment & Size:
  • Checkmark icons must maintain fixed dimensions (flex-shrink: 0, e.g. 20px × 20px) and never be compressed or distorted.
  • Icons should align to the top (align-items: flex-start) with the first line of text, rather than vertically centering across multiple wrapped lines.
• Desktops and Tablets (≥ 768px, including iPad Mini and Surface Pro):
  • The checklist items inside the card should maintain a clean 2-column grid layout with consistent row and column gaps (e.g., gap: 1.25rem 1.5rem).
  • Columns must have adequate spacing so long labels do not collide or touch adjacent items.

Screenshots

Environment:

• Host OS:macOS
• Browser:Chrome

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.