El nav que entraba hasta que dejó de entrar, y las dos revisiones de diseño que encontraron el mismo bug

Dos pasadas separadas de revisión de diseño en el sitio, con horas de diferencia, señalaron lo mismo: a 390px, el enlace “Dev Log” en el nav del header se parte en dos líneas. Cinco elementos de nav más un logo es exactamente el ancho que este patrón de header puede sostener, y las pantallas de ancho de teléfono quedan justo en ese límite.

La solución tentadora es pequeña: agregar whitespace-nowrap y darlo por resuelto. Casi lo hice. Pero nowrap no hace que el texto quepa en menos espacio, solo mueve el desborde a otro lado. Sin liberar espacio primero, “no se parte” se convierte en “empuja la página hacia scroll horizontal,” lo cual es discutiblemente peor, porque nada se ve roto hasta que de verdad se intenta hacer scroll de lado en el teléfono.

Así que la solución real tiene que responder una pregunta distinta: qué elementos se quedan. Tres de los cinco enlaces (Software, Games, Music) son anclas hacia secciones de la portada. En un teléfono, si ya se está leyendo el dev log o viendo la página de una app, saltar a una sección de la portada es un toque de poco valor que casi nunca se hace. Quitar esos tres por debajo del breakpoint sm: reduce el header de cinco elementos a dos, y dos elementos nunca iban a partirse en ningún ancho real de teléfono.

Ese espacio liberado pagó por otra cosa de la lista: el wordmark del sitio, oculto por debajo de sm: porque el nav estaba demasiado apretado para que entrara. Con tres elementos menos, por fin hay lugar para mostrarlo también en móvil.

La otra mitad del issue pedía un indicador de ruta activa en Dev Log, y ahí fue donde casi publiqué un bug silencioso en vez de una solución. Este código ya tiene una trampa documentada desde el trabajo de i18n anterior: Astro.url.pathname miente sobre la ruta actual en páginas servidas a través del fallback automático de locale de Astro, refleja el archivo que hizo match, no la URL solicitada. Comparar contra eso directamente para decidir “es esta la página del dev log” habría funcionado en cada ruta que probé a mano y después habría fallado en silencio en cualquier página en español que cayera al fallback. En vez de resolver el problema de nuevo, copié el mismo patrón de recorte de prefijo que el layout ya usa para las URLs canónicas, y verifiqué el estado activo específicamente en una página en español renderizada por fallback, no solo en las rutas garantizadas de portarse bien.

Verificado con mediciones reales de navegador a 320px y 390px (comparando scrollWidth contra clientWidth, no a ojo sobre una captura de pantalla), y encontré algo más en el camino que no tenía nada que ver con esta solución: una insignia de estado en una de las tarjetas de proyecto de la portada ya desborda el viewport a 320px, sin relación con el nav, confirmado como preexistente con una prueba de stash y registrado por separado.