Fix responsive design issues

[nicolasrouanne]

Description

Several responsive design issues have been identified that degrade the mobile experience.

Issues Found

Critical

1. CoverBackground negative margins cause horizontal overflow (app/components/CoverBackground.tsx)

   • Large negative margins (-left-32, -left-[126px], -top-32) without responsive variants
   • Causes horizontal scroll on mobile devices

2. Decorative elements overflow on mobile (Portfolio.tsx, BlogPreview.tsx, Values.tsx)

   • Dancing star SVGs with absolute positioning and large negative offsets
   • No responsive hiding — causes horizontal overflow

3. Team section images with fixed widths (app/components/Team.tsx)

   • Hard-coded width={470} on Next.js Image components

High

4. Disclosure button text not responsive (components/Disclosure.client.tsx)

   • Fixed text-2xl on all screen sizes

5. Stack section grid fragility (app/components/Stack.tsx)

   • Arbitrary fractional grid with no tablet adjustment

6. Cover animation height inconsistencies (app/components/Cover.tsx)

Moderate

7. Blog card text not responsive (app/components/BlogCard.tsx)
8. Text content without line-length constraints (multiple components)
9. NotionRenderer headings/code blocks not responsive (app/components/NotionRenderer.tsx)

Files to Update

• app/components/CoverBackground.tsx
• app/components/Portfolio.tsx
• app/components/BlogPreview.tsx
• app/components/Values.tsx
• app/components/Team.tsx
• app/components/Cover.tsx
• app/components/Stack.tsx
• app/components/BlogCard.tsx
• app/components/NotionRenderer.tsx
• components/Disclosure.client.tsx