feat: add verification badge sizing documentation

- Documented the behavior of `RouteBadge` and `NumericText` after animation changes.
- Addressed width issues for numbers `2` and `6` post-animation.
- Updated `ResizeObserver` to monitor number badge resizing.
- Fixed scaling for short numbers and ensured proper transitions.
- Verified functionality across different browser sizes and builds.
This commit is contained in:
2026-10-09 02:55:51 +03:00
parent f4ea47f2ae
commit bc95d0c122
6 changed files with 36 additions and 0 deletions

View File

@@ -17,6 +17,9 @@ export function RouteBadge({ number, large = false, filled = false }: { number:
};
const observer = new ResizeObserver(fit);
observer.observe(element);
// Outgoing digits collapse after the prop change; refit as their width shrinks.
// Observing the untransformed label avoids retaining the previous number's scale.
observer.observe(content);
fit(); void document.fonts.ready.then(fit);
return () => { mounted = false; observer.disconnect(); };
}, [number]);