Panel - Diseño flexible: poder mezclar líneas de 1, 2 y 3 columnas

pierre-gilles · 21 Agosto, 2026 12:23

¡Efectivamente, lo estoy mirando! Gracias

De hecho, no sé si has probado el ancho « Ancho completo », con una pantalla tan ancha, ¡quedaría magnífico en tu caso! Incluso puedes poner una columna o doble ancho para colocar, por ejemplo, la vista de tu casa, y hasta 6 columnas, ¡sería demasiado bonito!

En cualquier caso, habrá que adaptar nuestros paneles de control para aprovechar al máximo todas estas posibilidades

¡Lo voy a mirar!

La idea sería migrar los iconos que habías puesto en el nombre a los iconos dedicados del panel de control. Así serán homogéneos en todas las plataformas. Los emojis se mostraban de manera diferente según el sistema (iOS, macOS, Windows…), y los de Windows son, digamos… realmente malos

¡No!

b3n.0 · 21 Agosto, 2026 12:31

Secuencia de emociones al leer este hilo…
Es completamente loco,
enorme,

Tengo ganas…

Will_71 · 21 Agosto, 2026 12:56

Lo he probado pero me parece un poco grande en pantalla completa

pierre-gilles · 21 Agosto, 2026 12:57

Si es para poner 4 widgets, claro que queda muy ancho. La idea de la pantalla completa es aprovechar mejor el espacio: más columnas o poner algunas columnas en doble ancho, para mostrar una vista de tu casa, por ejemplo

Will_71 · 21 Agosto, 2026 13:09

Vaya, con 6 columnas, seguro que habrá que revisarlo para volver a hacer los dashboards con este bonito tema. Y es cierto que volver atrás es raro.

Por otro lado, mi dashboard puedo visualizarlo en mi pantalla grande y en una tableta. Pero si reduzco el tamaño hay un momento en el que los widgets no siguen. He puesto la resolución arriba para que puedas darte cuenta

pierre-gilles · 21 Agosto, 2026 13:13

¡Ah sí, efectivamente! ¡Voy a mirar!

Chris75 · 21 Agosto, 2026 13:26

y en el teléfono, ¿cómo queda?

pierre-gilles · 21 Agosto, 2026 14:27

Esto se ha corregido en master

Will_71 · 21 Agosto, 2026 14:45

Lo vuelvo a probar más tarde, te aviso.

Will_71 · 21 Agosto, 2026 23:16

@pierre-gilles Lo que me molesta de los iconos es que se indica que son opcionales, pero en realidad no lo son, porque hay un icono por defecto (la casa)

Y me gustaría no poner ninguno

Will_71 · 21 Agosto, 2026 23:52

Todavía tengo una diferencia entre el modo edición y el modo normal

Cuando reduzco el ancho, mejora, pero aún no es lo que quiero

Se cambia por encima de 990 píxeles de ancho

cicoub13 · 22 Agosto, 2026 07:29

Dos comentarios sobre móvil para las Escenas

no hay espacio entre las escenas
El título es muy poco legible

cicoub13 · 22 Agosto, 2026 07:32

El selector de hora para Inicio programado está debajo

cicoub13 · 22 Agosto, 2026 09:32

Y tres PR de corrección

github.com/GladysAssistant/Gladys

Scenes: restore the spacing between mobile scene rows (#2984)

master ← cicoub13:claude/scene-list-padding-o2ep5v

ouvert 08:54AM - 22 Aug 26 UTC

cicoub13

+10 -9

### Description On small screens the scene list rows were stacked with no spa…ce between them. The mobile list spaced its rows with `display: flex; flex-direction: column; gap: 10px`, but the same element also carries Bootstrap's `.d-block` (`display: block !important`). The flex display could therefore never win, and `gap` has no effect on a block container — so the spacing was silently dropped. Spacing now comes from a `margin-bottom` on `.sceneMobileRow` (with `:last-child { margin-bottom: 0 }` so no dead space is added under the list), which works on a block container. The now-unused `.sceneMobileList` class and its JSX reference are removed. Desktop grid (`row row-cards`) is untouched. ### Checklist - [X] Tests pass: `cd server && npm run coverage` (Codecov requires 100% coverage on changed lines) and Cypress (`npm run cypress:run`) if the UI changed - [X] Linter and prettier pass on both front and server (`npm run eslint`, `npm run prettier`) - [X] No undocumented breaking change <img width="573" height="875" alt="Capture d’écran 2026-08-22 à 10 54 57" src="https://github.com/user-attachments/assets/8d1453e6-c8ea-4961-a432-b657c5c844b9" /> ## Summary by CodeRabbit * **Style** * Improved spacing between scene rows on small-screen layouts. * Removed extra spacing after the final scene row. * Preserved the existing scene list appearance and behavior across larger screens.

github.com/GladysAssistant/Gladys

Scene editor: portal the date/time picker popup and restyle it (#2985)

master ← cicoub13:fix/scene-editor-datepicker-popup

ouvert 09:11AM - 22 Aug 26 UTC

cicoub13

+169 -0

## Problem In the scene editor, the **scheduled trigger**'s time picker opens… *under* the following steps and keeps react-datepicker's stock look, which is out of place in the modernized editor (#2936). ## Two separate causes **1. Stacking, not z-index.** The Horizon glass theme sets a `backdrop-filter` on `.glass-theme .card`, which makes every card its own stacking context. A popup opened inside the triggers card can therefore never paint above the cards that follow it in the DOM, whatever z-index it gets from the inside. The popup is now rendered on `<body>` through react-datepicker's `portalId` — the same approach `LightControlPanel.jsx` already uses for the same reason — with a z-index above the sticky footer. **2. Stock styling.** The default popup (grey header, hard 1px borders, square corners, fat scrollbar) is replaced by the theme's soft card grammar in a shared `datePicker.css`: rounded card with a soft shadow, muted small-caps caption, rounded rows, accent-colored selection, thin scrollbar. The month grid of the "custom time" date field follows the same grammar. Light colors only — dark mode comes from the app-wide inversion filter. **Bonus, same root area.** The field itself stayed narrower than its column: react-datepicker wraps its input in an `inline-block` wrapper that shrinks to the input's default size. It is now a block, like every other field of the editor. ## Scope Applied to every picker of the editor: the five of `ScheduledTrigger.jsx` and the two of `CheckTime.jsx` (the "check the time" step), which had the exact same defect. ## Checks - `prettier-check`, `eslint` (0 errors), `compare-translations`, `npm run build`: all pass - Verified with Playwright on a real mount of the component: the popup is a direct child of `<body>`, positioned exactly under the field (same `left`, `top` = field bottom + 10px) on first open, and `elementFromPoint` inside the popup returns a time-list item — nothing covers it anymore. <img width="497" height="447" alt="Capture d’écran 2026-08-22 à 11 11 34" src="https://github.com/user-attachments/assets/d1363242-4103-4735-a6f5-ce4bce0b001a" /> ## Summary by CodeRabbit * **Style** * Updated scene editor date and time pickers with a polished themed appearance, including rounded panels, shadows, improved typography, and clearer selected and hover states. * Improved date-picker layout so fields use the available column width. * Ensured picker menus display above sticky interface elements and remain properly positioned in the scene editor.

github.com/GladysAssistant/Gladys

Scene editor: stop truncating the scene name on mobile (#2986)

master ← cicoub13:fix/scene-editor-mobile-title

ouvert 09:30AM - 22 Aug 26 UTC

cicoub13

+11 -3

## Problem In the scene editor on mobile, the scene name is cut down to a cou…ple of characters (`Te…`), even for short names. The header locked the title into a fixed `col-7` / `col-5` grid. On mobile the settings button is icon-only (~32px wide) but its column still took 42% of the width, while the title column had to fit the back button, the icon tile, the name **and** the active switch in the remaining 58%. On a 375px screen that left roughly 45px for the name. ## Fix `front/src/routes/scene/edit-scene/`: - the title column becomes a fluid `col` and the settings column a `col-auto`, so the button takes only the width it needs (icon on mobile, icon + label on desktop) and the name gets all the remaining space; - `min-width: 0` on the new `.pageTitleColumn` and on `.sceneName` — a flex item otherwise refuses to shrink below its intrinsic width and the ellipsis never kicks in; - the active switch margin drops from `ml-4` to `ml-3` under 768px only. On a 375px screen the name now has ~165px instead of ~45px. Desktop is unchanged apart from long names, which get more room than before. ## Checks - `npm run prettier-check`, `npm run eslint` (0 error) and `npm run build` pass in `front/`. - No `data-cy` selector changed, so the scene Cypress spec is untouched. <img width="498" height="310" alt="Capture d’écran 2026-08-22 à 11 29 40" src="https://github.com/user-attachments/assets/210e6800-52f3-4c1a-85f4-09214386ea78" /> ## Summary by CodeRabbit * **Style** * Improved the scene editor header layout across screen sizes. * Scene names now truncate cleanly when space is limited. * Adjusted spacing and sizing for the active toggle and settings actions.

pierre-gilles · 24 Agosto, 2026 07:09

Gracias por todas las correcciones @cicoub13, está bien para mí, todo está en la cola de fusión

guim31 · 24 Agosto, 2026 08:47

¡No puedo esperar !!!

pierre-gilles · 24 Agosto, 2026 08:58

Desde la nueva barra de pestañas, en móvil y en modo tableta (panel mural), las pestañas se reducen a su icono solo, lo que permite mostrar muchas sin un menú que abrir.

El icono no es un detalle decorativo en estos modos, es la identidad de la pestaña.

Lo que cambia

Al crear un tablero, ahora hay que elegir un icono, al igual que el nombre. Esto es válido solo al crear: no se impone nada a los tableros existentes, y el campo sigue siendo opcional en la API.

¿Y los tableros actuales?

Es aquí donde se pone interesante. Muchos de vosotros ya ponéis un emoji al principio del nombre: « Cine », « Salón », « Temperaturas »…

Gladys ahora detecta el emoji al principio del nombre y lo convierte en el icono correspondiente: → sofá, → claqueta, → termómetro, → coche, → bombilla, → cama, → gato… 388 emojis están cubiertos (casas y habitaciones, cocina, electrodomésticos, multimedia, energía y luz, seguridad, herramientas, salud, clima, jardín, animales, transporte, banderas…). El emoji se elimina de la etiqueta de la pestaña para evitar tener la marca duplicada.

Es una solución temporal para que los tableros se vean bien directamente, pero os animo muy fuertemente a migrar vuestros tableros una vez que esté en producción

Will_71 · 24 Agosto, 2026 09:53

Vale, tu explicación me ha servido mucho.

Acabo de probarlo, la conversión ha funcionado excepto para algunos casos en los que no debería haber equivalencia. Lo haré manualmente porque voy a revisar todos mis paneles de control de todos modos.

Will_71 · 24 Agosto, 2026 10:06

Aquí están mis comentarios sobre la visualización:

Error en los ajustes del widget: al abrir un menú desplegable, si se desplaza la ventana de selección se mueve con el desplazamiento
En la imagen de abajo, estoy en la funcionalidad del dispositivo y la ventana ha subido

En el widget de Acciones Rápidas, si el nombre es largo se desborda (el nombre es solo un ejemplo ), si pongo espacios hay un salto de línea. Para información, en mi sección tengo 6 columnas.

El widget de temperatura/humedad no tiene el mismo tamaño en el modo Edición que en el modo normal

Me encanta el gráfico binario en toda la anchura de mi pantalla

cursor-bot · 24 Agosto, 2026 11:51

¡Hola a todos!

Este tema está ahora en desarrollo.

Se ha abierto una PR para corregir el menú select que se desprende al desplazarse por el panel de edición, y los nombres de acciones demasiado largos que desbordan el widget:

github.com/GladysAssistant/Gladys

Dashboard: fix edit-panel select detaching on scroll and long action names overflowing (#2994)

master ← claude/dashboard-user-feedback-qlc2lg

ouvert 11:49AM - 24 Aug 26 UTC

Pierre-Gilles

+57 -2

### Description Two fixes from community feedback on the new flexible dashboard… (post #60 of the forum topic): **1. Select menus detached from their control when scrolling the widget edit panel** react-select menus are portaled to `<body>` (so the edit panel's scroll container can't clip them), but their position is computed once when the menu opens: scrolling the panel — or the page — moved the control while the menu stayed floating where it was. The menu now closes on any scroll outside the menu itself (scrolling a long option list inside the menu still works), via a shared `closeMenuOnScroll` helper applied to every portaled select (widget edit forms, room selector, device feature selector, device migration modal). **2. Long action names overflowed the quick actions widget** In the quick actions widget, an action name without spaces grew the pill wider than the card and overflowed the widget (visible with narrow columns, e.g. a 6-column section). Pills are now capped at the widget width and the label wraps inside (`overflow-wrap: anywhere`, with `min-width: 0` so a spaceless name can break), while the icon keeps its size. The third point of the feedback — the temperature/humidity widget not having the same size in edit mode and normal mode — was already fixed by #2993 (edit canvas and viewer now share one column layout), so no change was needed for it here. ## Forum Forum: https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553 ### Checklist - [x] Tests pass: front `npm run build` passes; server untouched (front-only change, no unit-test script on front). Cypress runs in CI (binary download is blocked in this environment); dashboard specs don't interact with react-select menus. - [x] Linter and prettier pass on both front and server (`npm run eslint`, `npm run prettier`) - [x] No undocumented breaking change --- _Generated by [Claude Code](https://claude.ai/code/session_01PW6uEupVFUhkhiW9kmshss)_ ## Summary by CodeRabbit * **Bug Fixes** * Dropdown menus now close appropriately when the page scrolls, while remaining open during internal menu scrolling. * Improved dropdown behavior across device, chart, gauge, energy, music, scene, room, migration, and user-presence settings. * **UI Improvements** * Action buttons now fit within widget boundaries. * Icons retain their size, while long labels can wrap without overflowing narrow cards or widgets.

No duden en seguir la PR, probar (opcional, especialmente para pequeñas solicitudes) y dar sus comentarios aquí si es necesario.

Tema		Respuestas	Vistas
Gladys v4.16 : Améliorations UX tableau de bord + AQI + limitation logs Zigbee2mqtt Actualités	52	1695	14 Febrero 2023
Multi-Dashboard Demandes livrées feature-core	30	1976	4 Septiembre 2021
Récupération de graphiques et de leurs valeurs sur 24 heures depuis des périodes antérieures Demandes livrées	11	442	7 Agosto 2026
Problème image dans les widgets (navigateur desktop) Configuration v5	26	180	29 Agosto 2026
Pouvoir trier la liste des Dashboards Demandes livrées dashboard , feature-core , feature-request-ux	35	1455	3 Febrero 2023

Panel - Diseño flexible: poder mezclar líneas de 1, 2 y 3 columnas

Temas relacionados