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

**URL:** <https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553>\
**Category:** Demandes livrées\
**Tags:** in-progress\
**Created:** [Août 14, 2026, 1:18 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553 "2026-08-14T13:18:33Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Août 21, 2026, 12:23 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/41 "2026-08-21T12:23:27Z")

</div>

> [@Will\_71](#):
>
> Sur mon affichage, la largeur en mode Édition et en mode normal ne sont pas identiques.

Effectivement, je regarde ! Merci 🙂

> [@Will\_71](#):
>
> Dashboard en mode normal

D’ailleurs je ne sais pas si tu as testé la largeur «&nbsp;Pleine largeur&nbsp;», 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 🙂

> [@Will\_71](#):
>
> le widget a trop de hauteur

Je vais regarder !

> [@Will\_71](#):
>
> Si on veux les supprimer comment fait-on?

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 😄

> [@Chris75](#):
>
> - est-ce que l’ancien menu déroulant des dashboards est quand même conservé en plus des boutons à accès direct ?

Non !

---

<div class="post-metadata">

**Author:** ![b3n.0](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/b3n.0/32/3458_2.png) [@b3n.0](https://community.gladysassistant.com/u/b3n.0)\
**Post date:** [Août 21, 2026, 12:31 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/42 "2026-08-21T12:31:25Z")

</div>

🙄  
😲  
🫣  
😵  
🤩

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

j’ai hâte…

🥳

---

<div class="post-metadata">

**Author:** ![Will\_71](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/will_71/32/9582_2.png) [@Will\_71](https://community.gladysassistant.com/u/Will_71)\
**Post date:** [Août 21, 2026, 12:56 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/43 "2026-08-21T12:56:00Z")

</div>

> [@pierre-gilles](#):
>
> si tu as testé la largeur « Pleine largeur », avec un écran aussi large

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

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/f/f/ff55a0b00f0aa63b1a45c20ae01bae7506acefa0.jpeg)

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Août 21, 2026, 12:57 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/44 "2026-08-21T12:57:57Z")

</div>

> [@Will\_71](#):
>
> J’ai testé mais je trouve cela un peu gros du coup en pleine largeur

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 😉

---

<div class="post-metadata">

**Author:** ![Will\_71](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/will_71/32/9582_2.png) [@Will\_71](https://community.gladysassistant.com/u/Will_71)\
**Post date:** [Août 21, 2026, 1:09 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/45 "2026-08-21T13:09:44Z")

</div>

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.

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/7/f/7fca16bbd720579aa3de137e7699873764045721.jpeg)

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

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/a/8/a8cf5384e39b183dbaba004d7687363e2a8a8712.jpeg)

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Août 21, 2026, 1:13 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/46 "2026-08-21T13:13:18Z")

</div>

> [@Will\_71](#):
>
> 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

Ah oui effectivement 😃 Je vais regarder !

---

<div class="post-metadata">

**Author:** ![Chris75](https://gladys-assistant-community.b-cdn.net/letter_avatar_proxy/v4/letter/c/6a8cbe/32.png) [@Chris75](https://community.gladysassistant.com/u/Chris75)\
**Post date:** [Août 21, 2026, 1:26 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/47 "2026-08-21T13:26:15Z")

</div>

> [@Will\_71](#):
>
> 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

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

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Août 21, 2026, 2:27 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/48 "2026-08-21T14:27:22Z")

</div>

> [@Will\_71](#):
>
> Mais si je réduit la taille il y a un passage ou les widgets ne suivant pas.

C’est corrigé sur master

---

<div class="post-metadata">

**Author:** ![Will\_71](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/will_71/32/9582_2.png) [@Will\_71](https://community.gladysassistant.com/u/Will_71)\
**Post date:** [Août 21, 2026, 2:45 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/49 "2026-08-21T14:45:21Z")

</div>

Je reteste plus tard, je te tiens au courant.

---

<div class="post-metadata">

**Author:** ![Will\_71](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/will_71/32/9582_2.png) [@Will\_71](https://community.gladysassistant.com/u/Will_71)\
**Post date:** [Août 21, 2026, 11:16 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/50 "2026-08-21T23:16:18Z")

</div>

@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)

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/b/c/bc474fcc8e27b16550bff642fe69ccae9779e091.png)

Et j’aimerais bien ne pas en mettre

---

<div class="post-metadata">

**Author:** ![Will\_71](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/will_71/32/9582_2.png) [@Will\_71](https://community.gladysassistant.com/u/Will_71)\
**Post date:** [Août 21, 2026, 11:52 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/51 "2026-08-21T23:52:55Z")

</div>

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

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/2/5/25250035eca8553fcf3a6d3173525f7bf95c5c6a.jpeg)

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/c/0/c0fedeb8164af08702a1f5acb3474e71a6e24d9d.jpeg)

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

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/f/6/f6cccc561a12877ee945fff48510ad8131c3f7d4.jpeg)

Ça bascule au-dessus de 990 pixels de largeur

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/e/3/e33c848db5efbd24e92852abc370a9fe6d6ddd2d.jpeg)

---

<div class="post-metadata">

**Author:** ![cicoub13](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/cicoub13/32/4482_2.png) [@cicoub13](https://community.gladysassistant.com/u/cicoub13)\
**Post date:** [Août 22, 2026, 7:29 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/52 "2026-08-22T07:29:34Z")

</div>

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

 ![Capture d’écran 2026-08-22 à 09.28.10 2](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/3/8/389a98611a8fa363a5c2a919b83d805ae88fb78b.jpeg)  
 ![Capture d’écran 2026-08-22 à 09.28.28](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/5/9/5958579ae9b0600525bcb7640d8afba1c67822d5.jpeg)

---

<div class="post-metadata">

**Author:** ![cicoub13](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/cicoub13/32/4482_2.png) [@cicoub13](https://community.gladysassistant.com/u/cicoub13)\
**Post date:** [Août 22, 2026, 7:32 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/53 "2026-08-22T07:32:00Z")

</div>

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

 ![Capture d’écran 2026-08-22 à 09.31.07](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/8/1/81824ae8100d723b703198d3fe4464caf16a263d.jpeg)

---

<div class="post-metadata">

**Author:** ![cicoub13](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/cicoub13/32/4482_2.png) [@cicoub13](https://community.gladysassistant.com/u/cicoub13)\
**Post date:** [Août 22, 2026, 9:32 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/54 "2026-08-22T09:32:24Z")

</div>

Et trois PR de fix 🤖

> <https://github.com/GladysAssistant/Gladys/pull/2984>
>
> \### 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’écran 2026-08-22 à 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.

> <https://github.com/GladysAssistant/Gladys/pull/2985>
>
> \## 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’écran 2026-08-22 à 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.

> <https://github.com/GladysAssistant/Gladys/pull/2986>
>
> \## 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’écran 2026-08-22 à 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.

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Août 24, 2026, 7:09 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/55 "2026-08-24T07:09:29Z")

</div>

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

 ![Capture d’écran 2026-08-24 à 09.08.42](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/c/f/cf35f4d681b64cc0af079950944f2a1c58005c83.png)

---

<div class="post-metadata">

**Author:** ![guim31](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/guim31/32/4840_2.png) [@guim31](https://community.gladysassistant.com/u/guim31)\
**Post date:** [Août 24, 2026, 8:47 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/57 "2026-08-24T08:47:01Z")

</div>

Je n’en peux plus !!!

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Août 24, 2026, 8:58 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/58 "2026-08-24T08:58:53Z")

</div>

> [@Will\_71](#):
>
> @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)

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.

 ![Capture d’écran 2026-08-19 à 20.54.56](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/d/4/d40765376780562fa9da9e3d50a7b00ceb138a61.jpeg)

**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 😉

---

<div class="post-metadata">

**Author:** ![Will\_71](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/will_71/32/9582_2.png) [@Will\_71](https://community.gladysassistant.com/u/Will_71)\
**Post date:** [Août 24, 2026, 9:53 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/59 "2026-08-24T09:53:12Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Will\_71](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/will_71/32/9582_2.png) [@Will\_71](https://community.gladysassistant.com/u/Will_71)\
**Post date:** [Août 24, 2026, 10:06 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/60 "2026-08-24T10:06:23Z")

</div>

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é

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/f/5/f583fd2701d22a0fd0e962170f14fb2d648b3fa9.png)

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.

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/7/c/7c204168aaa7b05ca9d748f01e2dfd2039772509.png)  
 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/7/9/799c4f142f42aea75d59740071f37a4453a9a787.png)

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

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/2/5/2588b9f4342c4e998c276af5b4b78514397b0024.png)  
 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/1/a/1a29fba1b2ca4b57436483a64a16cfa1fbbe5876.png)

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

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/0/3/032e08170633270bfe6bcf87e86984105c881c24.png)

---

<div class="post-metadata">

**Author:** ![cursor-bot](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/cursor-bot/32/22252_2.png) [@cursor-bot](https://community.gladysassistant.com/u/cursor-bot)\
**Post date:** [Août 24, 2026, 11:51 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/61 "2026-08-24T11:51:17Z")

</div>

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 :

> <https://github.com/GladysAssistant/Gladys/pull/2994>
>
> \### 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.

[Page précédente](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553.md?page=2)

[Page suivante](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553.md?page=4)