Dashboard - Mise en page flexible : pouvoir mélanger les lignes à 1, 2 et 3 colonnes

pierre-gilles · Août 21, 2026, 12:23

Effectivement, je regarde ! Merci

D’ailleurs je ne sais pas si tu as testé la largeur « Pleine largeur », avec un écran aussi large, ça serait magnifique chez toi Tu peux même mettre une colonne ou double largeur pour mettre par exemple la vue de ta maison, et jusqu’à 6 colonnes, ça serait trop beau !

Dans tous les cas, il va falloir adapter nos tableaux de bord pour profiter pleinement de toutes ces possibilités

Je vais regarder !

L’idée serait de migrer les icônes que tu avais mises dans le nom vers les icônes dédiées du tableau de bord. Elles seront ainsi homogènes sur toutes les plateformes. Les emojis étaient rendus différemment selon le système (iOS, macOS, Windows…), et ceux de Windows sont, disons… vraiment pas terribles

Non !

b3n.0 · Août 21, 2026, 12:31

succession d’émotion à la lecture de ce fil…
c’est complètement ouf,
enooorme,

j’ai hâte…

Will_71 · Août 21, 2026, 12:56

J’ai testé mais je trouve cela un peu gros du coup en pleine largeur

pierre-gilles · Août 21, 2026, 12:57

Si c’est pour mettre 4 widgets c’est sûr que ça fait trop large, l’idée de la pleine largeur c’est de mieux utiliser l’espace : plus de colonnes, ou mettre certaines colonnes en largeur double, pour afficher une vue de ta maison par exemple

Will_71 · Août 21, 2026, 1:09

Voilà avec 6 colonnes, c’est sûr il faudra revoir pour refaire les dashboard avec ce beau thème. Et c’est vrai que revenir en arrière c’est bizarre.

Par contre, mon dashboard je peux le visualiser sur mon grand écran et sur une tablette. Mais si je réduit la taille il y a un passage ou les widgets ne suivant pas. J’ai mis la résolution en haut pour que tu puisses te rendre compte

pierre-gilles · Août 21, 2026, 1:13

Ah oui effectivement Je vais regarder !

Chris75 · Août 21, 2026, 1:26

et sur téléphone , ça donne quoi ?

pierre-gilles · Août 21, 2026, 2:27

C’est corrigé sur master

Will_71 · Août 21, 2026, 2:45

Je reteste plus tard, je te tiens au courant.

Will_71 · Août 21, 2026, 11:16

@pierre-gilles Ce qui m’embete pour les icones c’est que c’est indiqué optionnel mais en faite non car il y a une icone par défaut (la maison)

Et j’aimerais bien ne pas en mettre

Will_71 · Août 21, 2026, 11:52

J’ai encore une différence entre le mode édition et le mode normal

Quand je réduis la largeur, il y a du mieux, mais ce n’est pas encore ça

Ça bascule au-dessus de 990 pixels de largeur

cicoub13 · Août 22, 2026, 7:29

Deux retours sur mobile pour les Scènes

il n’y a pas d’espace entre les scènes
Le titre est très peu lisible

cicoub13 · Août 22, 2026, 7:32

Le sélecteur d’heure pour Déclenchement programmé est sous la suite

cicoub13 · Août 22, 2026, 9:32

Et trois PR de fix

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 · Août 24, 2026, 7:09

Merci pour tous les correctifs @cicoub13, c’est bon pour moi, tout est dans la merge queue

guim31 · Août 24, 2026, 8:47

Je n’en peux plus !!!

pierre-gilles · Août 24, 2026, 8:58

Depuis la nouvelle barre d’onglets, sur mobile et en mode tablette (panneau mural), les onglets se réduisent à leur icône seule, c’est ce qui permet d’en afficher beaucoup sans menu à ouvrir.

L’icône n’est pas un détail décoratif dans ces modes, c’est l’identité de l’onglet.

Ce qui change

À la création d’un tableau de bord, il faut désormais choisir une icône, au même titre que le nom. C’est valable à la création uniquement : rien n’est imposé aux tableaux de bord existants, et le champ reste optionnel côté API.

Et les tableaux de bord actuels ?

C’est là que ça devient intéressant. Beaucoup d’entre vous mettent déjà un emoji en préfixe du nom : « Cinéma », « Salon », « Températures »…

Gladys détecte maintenant l’emoji en tête de nom et le traduit vers l’icône correspondante : → canapé, → clap, → thermomètre, → voiture, → ampoule, → lit, → chat… 388 emoji sont couverts (maisons et pièces, cuisine, électroménager, multimédia, énergie et lumière, sécurité, outils, santé, météo, jardin, animaux, transports, drapeaux…). L’emoji est retiré du libellé de l’onglet pour éviter d’avoir la marque en double.

C’est une solution temporaire pour que les tableaux de bord rendent directement bien, mais je vous incite très fortement à migrer vos tableaux de bords une fois que ce sera en prod

Will_71 · Août 24, 2026, 9:53

Ok ton explication me va très bien.

Je viens d’essayer, la conversion a marché sauf pour certaine ou il ne devait pas avoir d’équivalence. Je le ferais manuellement car je vais revoir tous mes tableau de bord du coup!

Will_71 · Août 24, 2026, 10:06

Voilà mes retours concernant l’affichage:

Bug dans les paramètres de widget: quand on ouvre un select si on scroll la fenetre de sélection bouge avec le scroll
Dans l’image dessous, je suis sur Fonctionnalité de l’appareil et la fenetre est monté

Dans le widget Action Rapides, si le nom est grand cela déborde (le nom est juste pour l’exemple ), si je met des espaces il a y bien le retour à la ligne. Pour info dans ma section j’ai 6 colonnes.

Le widget température / humidité qui ne fait pas la même taille dans le mode Edition du mode normal

J’adore le graphique binaire sur toute la largeur de mon écran

cursor-bot · Août 24, 2026, 11:51

Salut tout le monde !

Ce sujet est désormais en cours de développement.

Une PR a été ouverte pour corriger le menu select qui se détache au scroll du panneau d’édition, et les noms d’actions trop longs qui débordent du 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

+53 -0

### 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, energy, music, scene, room, and user-presence settings. * **UI Improvements** * Action buttons now fit within widget boundaries. * Icons retain their size, while long labels can wrap without overflowing.

N’hésitez pas à suivre la PR, à tester (optionnel, surtout pour les petites demandes) et à faire vos retours ici si besoin.

Sujet		Réponses	Vues
Gladys Assistant 5 est disponible ! 🚀 Actualités	32	297	Septembre 4, 2026
Gladys v4.16 : Améliorations UX tableau de bord + AQI + limitation logs Zigbee2mqtt Actualités	52	1647	Février 14, 2023
Multi-Dashboard Demandes livrées feature-core	30	1879	Septembre 4, 2021
Récupération de graphiques et de leurs valeurs sur 24 heures depuis des périodes antérieures Demandes livrées	11	411	Août 7, 2026
Problème image dans les widgets (navigateur desktop) Configuration v5	26	59	Août 29, 2026

Dashboard - Mise en page flexible : pouvoir mélanger les lignes à 1, 2 et 3 colonnes

Sujets connexes