Skip to content

Conversation

@francisco-paragon
Copy link

@francisco-paragon francisco-paragon commented Dec 11, 2025

Issues Closed

Summary

Fixed alignment issues with integration cards in the grid layout. The cards were not maintaining consistent heights and proper vertical alignment, causing visual inconsistencies. This change ensures all cards have uniform height and are properly centered within their grid cells.

Changes

  • Updated IntegrationCard component to use full height and width with flexbox centering
    • Added h-full w-full classes to Card component
    • Changed CardContent to use flexbox layout with flex flex-col items-center justify-center h-full
    • Restructured card layout from horizontal to vertical flex layout for better alignment
    • Changed icon and name container from horizontal (flex gap-2 items-center justify-between) to vertical (flex-col gap-2 items-center) layout
    • Applied same alignment fixes to the Skeleton component
  • Updated IntegrationList component to ensure proper grid alignment
    • Added items-stretch to the grid container to ensure all grid items stretch to the same height
    • Added flex w-full classes to list items to ensure cards take full width of their container

Steps to Test

  1. Open the HCP example portal. Use a project that has many integrations added.
  2. Verify that all integration cards have consistent heights
  3. Verify that cards are properly centered within their grid cells
  4. Verify that the layout remains responsive across different screen sizes
  5. Check that the skeleton loading state also displays with proper alignment

Screenshots

image

Note

Unifies integration card height/alignment with centered vertical layout and stretches grid items; adds a PR template.

  • UI (Integrations)
    • IntegrationCard: Full-height/width card with centered vertical layout; updated CardContent and CardTitle to flex-center content; same adjustments applied to Skeleton.
    • IntegrationList: Grid now uses items-stretch; list items set to flex w-full to ensure cards fill their cells.
  • Repo
    • Add .github/pull_request_template.md for standardized PR descriptions.

Written by Cursor Bugbot for commit f8cf99c. This will update automatically on new commits. Configure here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants