14. Responsive Text Is About Readability

Completion overlay text can become too wide in portrait. Before positioning, I reset scale and check text bounds:

private applyResponsiveTextScale(text: Text): void {
  if (this.node.screen.getOrientation() !== 'port') {
    return;
  }

  text.setScale(1, 1);
  const screenWidth = this.node.screen.getVirtualSize().width;
  const maxWidth = screenWidth * LevelCompletionOverlayComponent.PORT_TEXT_MAX_SCREEN_WIDTH_RATIO;
  const bounds = text.view.getLocalBounds();
  const width = Math.max(0, bounds.width);
  if (width <= 0 || width <= maxWidth) {
    return;
  }

  const scale = Math.max(0.01, maxWidth / width);
  text.setScale(scale, scale);
}

This is also important for localization. A string that fits in one language may be much longer in another.