Responsive Flutter Layouts from 320dp: Constraints, Flex Overflows and Breakpoints

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 48.0 pixels on the right.
The relevant error-causing widget was:
  Row: file:///lib/product_card.dart:42:14
The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with
a yellow and black striped pattern.
═══════════════════════════════════════════════════════════════════════════════════

// ❌ WRONG: Will overflow on 320dp screens or with large text
Row(
  children: [
    Text('Sustainable Organic Cotton Crewneck', style: TextStyle(fontSize: 16)),
    SizedBox(width: 16),
    Text('$49.00', style: TextStyle(fontSize: 16)),
  ],
)

// ✅ CORRECT: Text flexes and truncates or wraps onto multiple lines
Row(
  children: [
    Expanded(
      child: Text(
        'Sustainable Organic Cotton Crewneck',
        style: const TextStyle(fontSize: 16),
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
      ),
    ),
    const SizedBox(width: 12),
    Text('$49.00', style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
  ],
)

Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: [
    Chip(label: Text('In Stock')),
    Chip(label: Text('Free Shipping')),
    Chip(label: Text('Eco Certified')),
  ],
)

Widget build(BuildContext context) {
  final mediaQuery = MediaQuery.of(context);
  // Allow text scaling between 1.0x and 1.6x, preventing extreme overflow
  final clampedScaler = mediaQuery.textScaler.clamp(minScaleFactor: 1.0, maxScaleFactor: 1.6);
  return MediaQuery(
    data: mediaQuery.copyWith(textScaler: clampedScaler),
    child: const ProductDetailBody(),
  );
}