fix(Card): CardHeader padding mismatch, CardFooter hardcodes flex items-center, no forwardRef on sub-components

[k-deejah]

Problem

The Card component family has three issues that make it inconsistent and harder to compose.

1. CardHeader uses pt-5 pb-4 — mismatches panel headers throughout the app

Every custom panel header uses py-4, but CardHeader uses pt-5 pb-4, creating a spacing discrepancy when switching from custom headers to CardHeader.

2. CardFooter hardcodes flex items-center gap-3 — no vertical layout support

Consumer panels needing a stacked footer (description above action buttons) cannot use CardFooter without conflicting flex utilities.

3. No forwardRef on any Card sub-component

Card, CardHeader, CardContent, CardFooter, CardTitle, and CardDescription all accept React.HTMLAttributes but none wrap with forwardRef. Consumers using Framer Motion, Radix tooltip, or intersection observers cannot attach refs.

Solution

1. Change CardHeader to py-4 (matching px-5 py-4 convention throughout the app).
2. Remove hardcoded items-center from CardFooter; default to flex gap-3 only.
3. Wrap all six Card sub-components in forwardRef following the same pattern as Button.tsx.

Acceptance Criteria

• CardHeader uses py-4
• CardFooter no longer hardcodes items-center
• All six Card sub-components use forwardRef
• Attaching a ref to <Card> compiles without TypeScript errors
• npm run build and tsc --noEmit pass

---

Note for Contributors: Write a clear PR description. Show the before/after spacing difference in CardHeader and confirm ref forwarding with a TypeScript example.

[paulddeveloper-droid]

@paulddeveloper-droid has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I count it as a privilege and opportunity to work on this issue. Please assign.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @paulddeveloper-droid to this issue.

[midexol]

@midexol has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi maintainer, can I get to work on this please?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @midexol to this issue.

[temi-Dee]

@temi-Dee has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi maintainer i can work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @temi-Dee to this issue.

[Gbotemi-ojo]

@Gbotemi-ojo has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi Team,

I’m interested in working on Issue #103. I have experience building robust UI component libraries and refactoring components for better composability and style consistency.

I am comfortable implementing forwardRef, fixing CSS layout mismatches, and following best practices to ensure a clean, maintainable PR.

You can check out my work and coding style here: https://github.com/Gbotemi-ojo

I’ve reviewed the requirements and am ready to get started. Please let me know if I can move forward with this.

Best regards,

Ojo Gbotemi Samuel

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Gbotemi-ojo to this issue.

[Gabugo-tech]

@Gabugo-tech has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I am a frontend developer with strong expertise in TypeScript, React, TSX, Tailwind CSS, HTML, and modern component architecture. I have extensive experience building and maintaining reusable UI component libraries, ensuring type safety, accessibility, and composability across applications.

This issue aligns closely with my skill set. I am comfortable working with React's forwardRef API, TypeScript generics, and component patterns commonly used in design systems. I understand the importance of maintaining consistent spacing conventions across UI components, improving layout flexibility, and enabling seamless integration with libraries such as Framer Motion, Radix UI, and intersection observers.

For this task, I can:

• Update CardHeader to use the standardized py-4 spacing convention.
• Refactor CardFooter to remove restrictive alignment styles while preserving sensible defaults.
• Implement forwardRef across all Card sub-components with proper TypeScript typing.
• Ensure full compatibility with existing component usage patterns.
• Validate the changes by running build and type-check pipelines (npm run build and tsc --noEmit) to guarantee there are no TypeScript errors.

I focus on clean, maintainable code that follows existing project conventions and minimizes the risk of regressions. I am confident in delivering this fix according to the acceptance criteria and contributing high-quality improvements to the Sorokit/ui component library.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Gabugo-tech to this issue.

[drips-wave]

Congratulations, @midexol! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @midexol: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊