fix(grouped): scope flex-wrap to narrow viewports (fixes #114)

[jenil]

Summary

Scoped flex-wrap: wrap to narrow viewports via media query. On desktop, grouped controls stay horizontal (existing behavior). On narrow viewports (<480px), items wrap to vertical layout with proper spacing.

The Problem (original)

Grouped controls overflowed horizontally on narrow viewports instead of wrapping (issue #114).

The Problem (desktop regression)

Unscoped flex-wrap: wrap exposed that Chota inputs have width: 100%, causing inputs to fill the entire row on desktop and push buttons to a second row.

The Fix

/* Desktop: horizontal (existing behavior) */
.grouped {
  display: flex;
  gap: 0 16px;  /* horizontal 16px gap, no vertical gap */
}

/* Narrow viewports: wrap with row spacing */
@media (max-width: 480px) {
  .grouped {
    flex-wrap: wrap;
    gap: 16px;  /* 16px gap in both directions (horizontal + vertical) */
  }
  /* Gapless groups keep joined borders */
  .grouped.gapless {
    gap: 0;
  }
}

Size Impact

• 3321 gzip bytes (baseline: 3326, ceiling: 4096) - under baseline
• gap is supported by all target browsers

Test Results

15/15 tests pass (2 existing VRT + 13 new):

• Desktop: horizontal, no wrapping, all items on same row (y positions match)
• Mobile/Narrow: wraps with 16px gap between rows
• Gapless + wrap: no regression, border-radius preserved, no extra gap
• Disabled: opacity 0.4 preserved
• Focus: box-shadow visible
• Mixed controls: no overflow, existing heights preserved

Files Changed

• src/_form.css - scoped media query + gap (7 lines)
• test/vrt/grouped-controls.spec.js - 13 tests (new)
• test/vrt/snapshots/ - 3 Chromium baselines (new)

Unresolved

• Linux CI VRT baselines (requires CI platform)