Skip to content

fix: equalize card heights on the projects page#666

Merged
Zahnentferner merged 1 commit intoAOSSIE-Org:mainfrom
reach2saksham:fix/project-cards-heights
Mar 15, 2026
Merged

fix: equalize card heights on the projects page#666
Zahnentferner merged 1 commit intoAOSSIE-Org:mainfrom
reach2saksham:fix/project-cards-heights

Conversation

@reach2saksham
Copy link
Contributor

@reach2saksham reach2saksham commented Mar 14, 2026

Addressed Issues:

Fixes #632

This PR resolves a UI issue on the /projects page where the project cards (CardProduct) had varying heights depending on the length of their description text. This resulted in a jagged, uneven grid layout.

By passing the grid's stretch height down through the wrapper elements, all cards in a grid row now maintain a uniform height, resulting in a much cleaner and polished UI.

Screenshots/Recordings:

Before:
image

After:
image

Additional Notes:

AI Usage Disclosure:

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.

Check one of the checkboxes below:

  • This PR does not contain AI-generated code at all.
  • This PR contains AI-generated code. I have read the AI Usage Policy and this PR complies with this policy. I have tested the code locally and I am responsible for it.

I have used the following AI models and tools: TODO

Checklist

  • My PR addresses a single issue, fixes a single bug or makes a single improvement.
  • My code follows the project's code style and conventions
  • If applicable, I have made corresponding changes or additions to the documentation
  • If applicable, I have made corresponding changes or additions to tests
  • My changes generate no new warnings or errors
  • I have joined the Discord server and I will share a link to this PR with the project maintainers there
  • I have read the Contribution Guidelines
  • Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
  • I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.

Summary by CodeRabbit

  • Style
    • Improved product card layout to properly fill container height for better visual consistency.

@coderabbitai
Copy link

coderabbitai bot commented Mar 14, 2026

📝 Walkthrough

Walkthrough

This pull request fixes inconsistent card heights in the projects tab by adding Tailwind CSS classes (block h-full) to the Link wrapper and motion.div components, ensuring they fill their parent container's full height.

Changes

Cohort / File(s) Summary
Card Layout Fix
src/components/products/CardProduct.jsx
Added block h-full classes to Link wrapper and h-full to animated card container to ensure consistent full-height card display across the projects tab.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested reviewers

  • Zahnentferner

Poem

🐰 Cards were dancing, heights all wrong,
Some tall, some short—a mismatched song!
But now with h-full, they stand as one,
Equal and even, the fix is done!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main change: adding CSS classes to equalize card heights on the projects page.
Linked Issues check ✅ Passed The PR successfully addresses issue #632 by adding h-full classes to ensure cards fill container height and maintain uniform grid layout.
Out of Scope Changes check ✅ Passed All changes are directly related to fixing card heights; only presentational/layout adjustments were made with no unrelated modifications.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
📝 Coding Plan
  • Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@Zahnentferner Zahnentferner merged commit c9a3594 into AOSSIE-Org:main Mar 15, 2026
1 check passed
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.

Cards in projects tab have different heights

2 participants