📄 SKILL.md

← Vault

name: doccorretor-admin-cards-stretch-fix

description: Fix stretched/flexed cards in DocCorretor admin panel — root flex h-full + main flex-1 causes cards to fill viewport height

category: web-development

DocCorretor Admin Cards Stretch Fix

Problem

When the root element has flex flex-col h-full and the

element has flex-1, all child cards stretch to fill the full viewport height — every card becomes identical in height regardless of content.

Solution

1. Remove flex-1 from

— prevents it from filling remaining viewport height

2. Wrap main content in

— constrains width and centers content without stretching cards

3. Card inner div: use flex flex-col NOT block flex-1 — flex-1 forces card to grow, making all cards same height

Files

  • - /var/www/documentos/deploy-vps-nodejs/app/src/routes/admin.tsx

Verified pattern (same as clients page /)

`tsx

...

{/ cards grid /}

`

Anti-pattern (causes stretching)

`tsx

// BAD: flex-1 on main forces children to fill viewport

// BAD: flex-1 on card inner div forces all cards same height

`