La insignia que no tenía a dónde ir

Encontré esto de rebote, mientras verificaba una solución distinta. El cambio de la navegación móvil recién había aterrizado, y parte de verificarlo significaba revisar el header a 320px, el ancho más angosto contra el que todavía se prueba algo. El header estaba bien. Bajando a la sección de Software de la portada, no lo estaba: toda la página tenía scroll horizontal.

Cada tarjeta de proyecto tiene un título y una pequeña píldora de estado, “En desarrollo,” “Herramienta interna,” ese tipo de cosas, una al lado de la otra en una fila flex. La píldora tenía shrink-0 whitespace-nowrap, que normalmente es exactamente lo que se busca en una insignia: que no se comprima hasta convertirse en una elipsis ilegible. Sin embargo, nadie le había dicho a la fila qué hacer cuando el título y la píldora juntos no entraban. Sin flex-wrap en el contenedor, sin min-w-0 en el título. Una fila flex sin margen de maniobra en ningún lado simplemente sigue creciendo más allá de su contenedor en vez de saltar de línea, y ese crecimiento no se detiene en la tarjeta, empuja toda la página más ancha que el viewport.

La solución son dos clases: flex-wrap en la fila del encabezado, min-w-0 en el título. Ahora, cuando no hay espacio, la insignia baja a su propia línea debajo del título en vez de obligarlos a compartir un carril demasiado angosto.

Antes de publicarlo, revisé algo que el issue no pedía: la versión en español. ui.ts traduce “Internal tool” a “Herramienta interna” y “Stealth mode” a “Modo sigiloso,” ambas más largas que el inglés. Si la insignia en inglés ya era demasiado ancha a 320px, la española iba a ser peor, y no quería arreglar un idioma y dejar el otro roto en silencio. Cargué /es/ al mismo ancho y lo medí de la misma forma: cero desbordamiento, mismo comportamiento de salto de línea, etiquetas más largas y todo.

La verificación acá fue sobre todo una llamada a getBoundingClientRect() en el navegador en vez de mirarlo a ojo, comparando scrollWidth contra innerWidth a 320px (0px de diferencia, en ambos idiomas) y confirmando que el título y la insignia siguen compartiendo fila a 1024px, donde no hacía falta cambiar nada. Las capturas de pantalla sirven para detectar algo que se ve mal; la matemática exacta de píxeles es lo que realmente demuestra que un bug de desbordamiento desapareció.