CVC widget label is clipped in narrow containers (e.g. French "Code CVC")

[AbhishekChorotiya]

Describe the bug

The CVC field label gets visually clipped when the parent container width is very small. This is most visible in locales whose CVC label is longer than the English abbreviation — for example the French locale renders the label as "Code CVC", which does not fit in a narrow field and gets cut off.

Expected behavior

When the container is too narrow to fit the full CVC label, the widget should fall back to a shorter label (e.g. "Code CVC" → "CVC") and restore the full label when the container is widened again.

Steps to reproduce

1. Render the standalone CVC element (or a card form) with locale=fr.
2. Shrink the field/container width.
3. Observe the "Code CVC" floating label being clipped.

Additional context

• The fallback should be i18n-correct: non-Latin locales (Arabic, Chinese, Japanese, Hebrew, Traditional Chinese) must not fall back to an English "CVC" string.
• Reported by a merchant using the French locale.

---

Resolution

Fixed in PR #1736.

• Scope: French (fr) locale only — it is the only locale that ships a long CVC label ("Code CVC"); every other locale already uses a short label (e.g. fr-BE → CVC), so no per-locale string changes were needed. Detection is localeString.locale == "fr".
• Behavior: when the field is too narrow to fit "Code CVC", the label falls back to "CVC", and it restores the full label when the field is widened again (bidirectional).
• Implementation: a reusable useResizeObserver hook watches the CVC field container; the label's natural width is measured with Canvas measureText (the floating label is absolutely positioned and wraps, so scrollWidth cannot detect the overflow) and compared against the container width with a small buffer.
• i18n note: because the fallback is French-only and uses the literal "CVC", no English string is injected into any other locale.