Hola,
Tengo un problema con los widgets de la cámara y la casa.
Las imágenes no se ajustan al widget en modo navegador de escritorio (aunque está bien en modo responsive en mi teléfono):
Cámara: hace un zoom recortado de las imágenes
Casa: la foto importada no se redimensiona al tamaño del widget (la foto se desborda, no es como la cámara).
¿Alguien más está experimentando lo mismo?
mutmut
28 Agosto, 2026 18:46
2
También tengo un problema con el widget vista de la casa.
Como se desborda arriba y abajo, ya no se pueden hacer clic en los iconos de la derecha:
guim31
28 Agosto, 2026 18:47
3
¡Creo que solo tenéis casas demasiado grandes!
¡Hola a todos!
Este tema está ahora en desarrollo .
Se ha abierto una PR para mantener las imágenes de la cámara y la vista de la casa en su tarjeta en el escritorio:
master ← claude/bug-image-widgets-desktop-auoi6o
ouvert 07:53AM - 29 Aug 26 UTC
### Description
Fixes the desktop image bugs reported on the forum (topic 10737… ), all side effects of the selective column stretch (spec A.4) shipped in v5. Four rounds of preview testing by the topic's reporters shaped the final result.
**Camera widget — excluded from stretch entirely.** A stretched camera card had no good rendering, and field testing rejected every variant in turn:
1. `object-fit: cover` (v5 as shipped) cropped a 16:9 frame to a vertical slice of its center ("zoom tronqué");
2. `object-fit: contain` showed the full frame but padded a lone camera next to a taller column with large letterbox bands;
3. capping the card at the measured snapshot ratio (`--media-ratio` + inline-size query container) removed the bands, but the stretch wrapper kept absorbing the column leftover invisibly — showing up as holes *between* the widgets of a short column.
With the ratio cap, stretching a camera was a no-op anyway (the card could never exceed its natural height), so the camera is now removed from `MEDIA_STRETCH_BOX_TYPES` along with all the machinery that served only stretched cameras. A camera card keeps its natural image height everywhere: never cropped, never letterboxed, widgets packed at the top of a short column with the free space breathing once at the bottom — the spec's "column simply ends earlier" principle. The photo widget keeps its stretch (`photo_fit` is the user's choice).
**House-view widget** — the image overflowed the card top and bottom when taller than the 65vh cap, covering the header and neighbors: the illustration is now fitted *inside* the cap by bounding the **width** of its wrapper, `min(100%, calc((65vh - 6rem) * var(--hv-ratio, 9999)))` — height being width ÷ ratio, the whole card stays under the cap, the image is scaled down and centered, and the wrapper keeps hugging the image so the `%`-positioned pins stay on their points. **Confirmed on the preview by both reporters ("c'est nickel", "ok pour moi pour la maison").**
Two house-view mechanisms were rejected on preview builds, documented in spec A.4:
1. intrinsic-based sizing — the bundled gallery illustrations are viewBox-only SVGs with no intrinsic dimensions (`naturalWidth` = 0) and collapsed to nothing;
2. `min-height: fit-content` on the stretch wrapper — worked in Chromium, but Firefox still clamped the card.
The final code uses only `min()`/`calc()`/custom properties (identical in every engine): the house ratio comes from `gallery.js` (declared per illustration from its viewBox) or is measured once on load for uploaded photos, threaded as `--hv-ratio` under the `dashboard-stretched-tile` marker. Mobile (<992px) is untouched. Spec A.4 records the camera exclusion, both mechanisms, and all the rejected alternatives.
## Forum
Forum: https://community.gladysassistant.com/t/probleme-image-dans-les-widgets-navigateur-desktop/10737
### Checklist
- [x] Tests pass: no server change (front-only); front build passes (`vite build`)
- [x] Linter and prettier pass on both front and server (`npm run eslint`, `npm run prettier` — only pre-existing inline-style warnings remain)
- [x] No undocumented breaking change
## Summary by CodeRabbit
* **New Features**
* Improved stretched tile layouts with more accurate image sizing and centered desktop presentation.
* Added separate layout handling for stretched tiles and media widgets.
* **Bug Fixes**
* Camera cards now retain their natural snapshot height instead of stretching to fill extra column space.
* Removed unnecessary letterboxing and ratio-based height constraints from camera cards and editor previews.
* Preserved existing stretch behavior for photo and tile widgets.
No dudes en seguir la PR, probar (opcional, especialmente para pequeñas solicitudes) y dar tus comentarios aquí si es necesario.
¿Los que tienen el error, pueden probar en esta URL? https://claude-bug-image-widgets-des.gladys-plus.pages.dev/ ¿
¡Gracias!
mutmut
29 Agosto, 2026 09:02
8
en mi casa no tengo absolutamente nada después de seleccionar la casa:
¡Uf, normalmente ya está corregido
Para las webcams, las imágenes ya no se recortan (aunque los widgets no tienen todos el mismo tamaño, aunque todas las imágenes son en 16:9).
Para el widget de la casa, no hay evolución:
Gracias @PhilippeMA por tus pruebas, acabo de subir una nueva versión a la misma URL, se aceptan probadores
Todo está bien. Para las cámaras, ahora tengo bandas negras (los widgets no están correctamente dimensionados), pero las imágenes ya no están deformadas. Y para el widget personalizado, es perfecto.
Excelente, ¿alguien más para confirmar? Voy a hacer un lanzamiento esta tarde, sería genial que saliera con eso
Voy a ser molesto, pero lo prefería antes. Para la cámara en el medio, el widget se adapta a la zona y tengo grandes zonas negras. No soy fan.
mutmut
29 Agosto, 2026 12:55
15
ok para mí para la casa:
Por cierto, ¿las chinchetas son solo información o se pueden controlar?
→ ok, acabo de releer el blog (¡RTFM!) y es solo información.
¡Estoy de acuerdo, no es terrible!
La solución sería simplemente no recortar dinámicamente las cámaras, y qué más da si deja un hueco en la columna:
He subido una nueva versión a la misma URL
@mutmut
Hay una demanda para esto
Me gustaría, si es posible, que al hacer clic en un alfiler se realice una acción.
por ejemplo aquí hay dos acciones posibles (abrir la persiana o encender la luz de la cocina
[image]
¿Qué opinas?
Aquí está el resultado en mi caso. Tengo una organización en 3 columnas;
para mí está bien ahora con las cámaras