Actualmente tengo un módulo de botones que, en función de una matriz que se le proporciona, genera un botón con una imagen y un texto. Sin embargo, ahora que comencé a agregar traducciones a los botones, noté que algunas traducciones para palabras más complejas se desbordan del botón, de manera inconsistente.

La parte inferior izquierda es el texto estándar/predeterminado en inglés. Hay algunas inconsistencias que aún tengo que resolver, pero todo es estilo desde mi punto de vista. Todavía estoy aprendiendo cómo funcionan los botones de diseño.

Todos los demás botones muestran lo que sucede cuando se presenta/selecciona/utiliza un idioma diferente. Los botones actualizan el texto cuando se actualiza el idioma, por lo que se actualizan dinámicamente con texto nuevo.

Cada botón se genera así:

 return <button key={buttonName} disabled={disabledStatus} style={this.props.buttonStyle} onClick={this.handleButtonClick.bind(this, buttonLowerCase) > <img src={...} alt={buttonName} /> <span style={spacer}/> || This is just {width: '5px'} for seperation|| {buttonText} </button>;

buttonStyle se transmite con los siguientes parámetros del módulo:

 { width: '100px', margin: '5px', height: '38px', display: 'flex', alignItems: "center", justifyContent: "left", };

¿Cuáles son las posibles soluciones a esto? Teniendo en cuenta que los botones no pueden crecer hasta tener un tamaño mayor de lo que son actualmente. También noto que el espaciador no parece ser respetado, si el texto es más grande que el espacio dado, ahora que lo miro, pero no tengo una mejor solución para formar un poco de espacio a partir del texto en este punto.