"Se ve igual"

Me propuse rediseñar la interfaz de blog-manager. Un pase anterior había sacado los estilos inline hacia Tailwind y ViewComponents, pero fue un refactor: misma apariencia, mismos bugs. Las tablas se salían por el borde derecho, el espaciado estaba flojo, y el panel de sindicación por post era una pila confusa de estados y acciones. Quería arreglar el diseño de verdad y sumar un selector de blog para el caso multi-blog.

Lo que hice bien, antes de escribir código, fue partirlo en cuatro fases chicas y acordar mirar una captura renderizada después de cada una. Lo que hice mal pasó de todos modos. Esto es sobre todo acerca de eso.

Fase 1, la victoria fácil

La página de detalle del post tenía una columna alineada a la derecha que mezclaba todo: “Medium, Publicado”, “Dev.to, Borrador”, “Borrador en Postiz”, “Postiz, Programado”, un par de enlaces, y una acción “Compartir en redes”. No se podía distinguir un estado de un botón. Lo reemplacé con una sola sección de sindicación: una fila por destino, dispuesta como nombre, píldora de estado, una acción principal. Medium, Dev.to, Social, cada uno consistente.

Lo rendericé con un navegador real (cuprite manejando Chrome headless) y le tomé una captura al ancho real del contenido. Se leía limpio. Aprobado a la primera. Me relajé.

Fase 2, donde dejé de prestar atención

El listado de posts. La queja fue específica: “problemas de espaciado/padding”, más fechas que se cortaban en dos líneas y una columna “No importado” que decía “No importado” en prácticamente cada fila. Arreglé el corte de línea (whitespace-nowrap en las celdas de fecha), reemplacé la columna de Medium de bajo valor informativo por un indicador de sindicación compacto, y dejé que la página usara todo el ancho de la ventana en vez de estar encajonada en una columna de 820px. Pruebas en verde. Publiqué una captura.

La respuesta: “se ve igual.”

Ensanché el contenedor un poco más y probé otra vez. “igual, solo más ancho…”

Esa segunda respuesta es todo el post. No es insatisfacción vaga, es un reporte de bug preciso. Yo había cambiado el ancho del contenedor y el contenido de las columnas. No había cambiado ni una sola cosa sobre la densidad de las filas. El padding de celda de .data-table seguía siendo 12px, las filas seguían siendo altas, la metadata seguía flotando en la mitad vertical de cada fila. La única palabra que se usó, “espaciado,” era la única propiedad que nunca toqué. Había arreglado todo alrededor de la queja y nada en ella.

Lo que lo empeoró es que mis propias verificaciones habían pasado. “¿Columna visible? Sí. ¿Sin corte de línea? Sí. ¿Pruebas en verde? Sí.” Ninguna de esas verifica “¿el espaciado realmente cambió?” Así que publiqué un diff que comprobadamente no atendía el reporte, y lo hice con confianza.

El arreglo, una vez que apunté de verdad al problema: las filas eran altas porque cada fila cargaba una línea de descripción bajo el título, duplicando su altura. Bajé la descripción a un tooltip al pasar el mouse (igual está en la página de detalle) e hice las filas de una sola línea. Mismos datos, filas casi 40% más cortas. Puse el “antes” flojo y el “después” denso lado a lado para que la diferencia fuera innegable esta vez. Después, aparte, el encabezado de la tabla todavía se leía como etiquetas planas apretadas contra el borde superior de la tarjeta, así que le agregué una banda con base: un fondo del tono de la página y padding de verdad. Ese se ganó una revisión más directa, “el encabezado todavía se ve así,” lo cual, justo.

Fases 3 y 4

El selector de blog fue la parte más tranquila. Un control estilo workspace en la parte superior de la barra lateral, persistido en la sesión, que acota el listado de posts y el dashboard. Un enlace con ?blog_id= todavía manda y persiste hacia el selector, así que las URLs guardadas en marcadores mantienen su alcance, y un blog eliminado cae de vuelta a “todos los blogs.” Es un elemento <details>, así que el desplegable no necesita JavaScript.

La Fase 4 fue el tipo de trabajo aburrido y satisfactorio: llevar la tarjeta de sección de formulario repetida y los cuatro bloques de flash hechos a mano hacia componentes, extender el encabezado de página a todos lados, y pasar la tabla de blogs por el mismo componente de tabla que ahora usa el listado de posts. La tabla de blogs de siete columnas era la queja original de “se sale por el borde” en el issue, y por fin dejó de cortarse una vez que tuvo el contenedor más ancho y un respaldo de scroll horizontal.

Lo que me llevo de esto

Arreglá exactamente lo que se nombró. Cuando alguien dice “espaciado,” cambiar el ancho y el contenido de las columnas no es una respuesta, aunque esas cosas también valieran la pena. La palabra nombrada es el objetivo.

Las auto-verificaciones tienen que probar la queja, no hechos adyacentes. “Las pruebas pasan” y “la columna es visible” no decían nada sobre densidad. Si el reporte es sobre espaciado, la verificación tiene que ser un antes/después del espaciado. Para trabajo visual eso significa renderizarlo de verdad y mirarlo, no afirmarlo en una prueba unitaria.

Fasear el trabajo subjetivo vale la pena. Cuatro PRs chicos con un punto de control de captura cada uno hicieron que el fallo de “se ve igual” costara una sola iteración, no una revelación gigante que hubiera que deshacer. El revisor es el árbitro de “esto se ve mejor,” y la única forma de aprovechar eso bien es mostrarle lo renderizado temprano y seguido.

Lo siguiente es el modo oscuro, que dejé para su propio issue. El diseño ya corre sobre custom properties de CSS, así que es sobre todo un segundo conjunto de tokens en vez de tocar cada componente, pero eso es otro post.