# Dashboard - Mise en page flexible : pouvoir mélanger les lignes à 1, 2 et 3 colonnes **URL:** \ **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:** 2
**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 17, 2026, 12:08 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/21 "2026-08-17T12:08:00Z")
Salut tout le monde ! Ce sujet est désormais **en cours de développement**. Une PR a été ouverte pour permettre une mise en page flexible des tableaux de bord : > > > \### Description > > Adds the living specification \`docs/specs/dashboard-flexible-la…yout-and-widgets.md\` \*\*and implements its phases 1–4\*\* (phases 5–6 — Gladys Plus AI illustration generation, energy-flow widget — remain design only). > > \*\*Phase 1 — Section-based flexible layout\*\* > \- Dashboards become a stack of sections, each with its own column count (1–4). \`boxes\` moves to \`\[{ columns: \[\[box\]\] }\]\`; legacy values are normalized in a \`beforeValidate\` hook and on read — no SQL migration, lazy migration on next save. > \- The editor works on a flat column list plus a \`sectionSizes\` array so drag & drop coordinates stay global; "Add a section" flow, per-section column add/delete. > \- Selective stretch with two behaviors: media boxes (camera, photo) let their image absorb the extra height; tile boxes (room temperature/humidity, house-view) center their content in the taller card so section bottoms line up. > > \*\*Phase 2 — Density widgets\*\* > \- New \`chips\` box: full-width bar of compact state pills (device feature, openings aggregate, alarm, next calendar event with name filter), live websocket updates, automatic icons. > \- Scene box: optional per-scene live status subtitle (\`scene\_status\_features\`), shared \`DeviceFeatureValueText\` rendering. > > \*\*Phase 3 — Appearance & tablet navigation\*\* > \- Nullable \`t\_dashboard\` columns (migration): \`background\_image\`, \`card\_style\` (\`default\`/\`glass\` with dark-mode variant), \`icon\`. > \- In tablet mode the dashboard dropdown becomes a horizontal icon tab bar. > > \*\*Phase 4 — House-view widget & dashboard assets\*\* > \- New \`house-view\` box: an illustration with live device values pinned in percent coordinates; pins placed by clicking the image in the editor, rendered as floating badges updated over websocket. > \- Bundled gallery of 4 isometric house illustrations (SVG, generated from a small projection script for a consistent style) + upload of any image, downscaled client-side in a canvas. > \- New \`t\_dashboard\_asset\` table (blob + content type, \`ON DELETE CASCADE\` with the dashboard); \`POST /api/v1/dashboard\_asset/:dashboard\_selector\` (raster types only, base64 ≤ 4 MB, dedicated 6 MB JSON body bound mounted behind authentication via a new \`largeJsonBody\` route flag) and \`GET /api/v1/dashboard\_asset/:id\` served like the photo proxy. > > i18n added for en/fr/de. The spec is updated in the same diff with every implementation decision (spec-first process from \`AGENTS.md\`). > > Related forum topic (flexible layout discussion): https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553 — intentionally not using the \`Forum:\` auto-notification format while phases are still landing. > > \### Checklist > > \- \[x\] Tests pass: full server suite green with 100% coverage on all changed server files (dashboard model/lib/controllers, asset storage, sections utils); Cypress dashboard specs reviewed — seeds go through the API which normalizes legacy boxes, UI selectors unchanged > \- \[x\] Linter and prettier pass on both front and server (0 errors; warnings pre-existing) > \- \[x\] No undocumented breaking change — legacy dashboards are normalized transparently; API clients reading \`boxes\` see the new documented shape > > 🤖 Generated with \[Claude Code\](https://claude.com/claude-code) > > https://claude.ai/code/session\_01V5CrGLqU9mqadN5p8CFVvt N’hésitez pas à suivre la PR, à tester dès que possible et à faire vos retours ici. ---
**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 17, 2026, 3:47 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/22 "2026-08-17T15:47:01Z")
Avancement du développement ! Sur tablette, c’est ultra agréable : ![Capture d’écran 2026-08-17 à 17.41.00](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/1/2/12a3b178003ddd17265aabfb73d886985990e8d2.jpeg) Avec plusieurs nouveaux widgets : - « Pastilles » (la ligne en haut avec le niveau de Co2, le « tout fermé », etc..) - Un widget « Actions rapides » qui peut mélanger des scènes, des appareils, etc… - Vue de la maison : affichage d’une image de votre maison avec des pastilles sur certaines parties de la maison ! Le sélecteur de tableau de bord ne demande plus 2 clics mais un seul clic, sauf si vous avez beaucoup de scènes, les scènes suivantes sont accessible via un « … » qui s’affiche en bout sur les petits écrans : ![Capture d’écran 2026-08-17 à 17.44.38](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/9/0/9070fa143d1182f7597f4748546244cebe17ee04.jpeg) L’écran d’édition a aussi été entièrement revu : ![Capture d’écran 2026-08-17 à 17.41.23](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/0/8/0853cc05ec0c2070cb5617614e12dd691ec86000.jpeg) ![Capture d’écran 2026-08-17 à 17.45.20](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/a/1/a197f82a3fbb48c398d7f8aad4e84c7e1eedc273.jpeg) C’est très agréable sur mobile également : ![Capture d’écran 2026-08-17 à 17.46.21](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/d/3/d3ba222c6fa037470c60ee000d9256f3178b42fa.jpeg) ---
**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 17, 2026, 4:08 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/23 "2026-08-17T16:08:19Z")
Bon… Là je dois avouer que je suis surpris ! 😲 J’ai longtemps pensé que l’UI était volontairement figée, donc je n’ai jamais trop demandé d’évolution à ce niveau là. Je dois avouer que ces rendus me plaisent vraiment BEAUCOUP ! (à peine trop Apple-like à mon goût 😝 mais je chipote). Si mon Gladys ressemblait à ça, je serai très très fan !!! 👍 🎉 ---
**Author:** ![spenceur](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/spenceur/32/1961_2.png) [@spenceur](https://community.gladysassistant.com/u/spenceur)\ **Post date:** [Août 17, 2026, 4:22 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/24 "2026-08-17T16:22:46Z")
Il serait possible davoir un widget sur 1 2 ou 3 colonnes si je comprend bien ? Le visuel est non contractuels @guim31 🤣 ---
**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 17, 2026, 4:27 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/25 "2026-08-17T16:27:20Z")
> [@spenceur](#): > > Il serait possible davoir un widget sur 1 2 ou 3 colonnes si je comprend bien ? C’est littéralement le titre de la demande 😂 > [@spenceur](#): > > Le visuel est non contractuels @guim31 🤣 Totalement contractuel, l’implémentation est réelle, et testée, vous pouvez même tester, c’est déjà live dans la branche, et il y a même une image Docker 😉 ⚠ ne surtout pas tester sur sa production, ce n’est pas réversible ---
**Author:** ![spenceur](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/spenceur/32/1961_2.png) [@spenceur](https://community.gladysassistant.com/u/spenceur)\ **Post date:** [Août 17, 2026, 4:30 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/26 "2026-08-17T16:30:55Z")
> [@pierre-gilles](#): > > C’est littéralement le titre de la demande 😂 Ouai bah oh cest bon jai eu une grosse journées et ma deuxieme commence a l’instant 🤣 Et je me doute que cest pas de lia tes images ^^ cest rafraîchissant cette nouvelle interface ---
**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 17, 2026, 5:13 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/27 "2026-08-17T17:13:11Z")
Fable a totalement refait le drag & drop en virant react-dnd et en le faisant en natif dans le navigateur, et c’est incroyable 🤩 ---
**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 17, 2026, 5:44 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/28 "2026-08-17T17:44:22Z")
Non mais ce teasing de fou 🤪 ---
**Author:** ![PhilippeMA](https://gladys-assistant-community.b-cdn.net/letter_avatar_proxy/v4/letter/p/b3f665/32.png) [@PhilippeMA](https://community.gladysassistant.com/u/PhilippeMA)\ **Post date:** [Août 17, 2026, 6:27 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/29 "2026-08-17T18:27:56Z")
La prochaine release va être dingue ! Je suis fan du nouveau thème et des possibilités qui vont arriver ! Vivement 😃 ---
**Author:** ![mutmut](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/mutmut/32/14064_2.png) [@mutmut](https://community.gladysassistant.com/u/mutmut)\ **Post date:** [Août 17, 2026, 7:12 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/30 "2026-08-17T19:12:34Z")
On a le droit de dire que c’est une tuerie ce nouveau design 🤩 Quand est-ce qu’on prend un jour de congés pour jouer avec les futures 100 innovations ?? 😜 ---
**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 19, 2026, 7:01 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/31 "2026-08-19T19:01:07Z")
J’ai bien avancé et c’est juste dingue ce que Fable m’a proposé 😍 Le nouveau tableau de bord : ![Capture d’écran 2026-08-19 à 20.49.18](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/4/5/45aba997bd9fd98f48f67feb50e2940b41bc763d.jpeg) Il y a beaucoup de petits détails très sympa à l’usage qui sont juste fous à utiliser. Le tableau de bord est maintenant découpé en « Sections », et chaque section contient une colonne ou plus. L’édition de tableau de bord est totalement repensée : ![Capture d’écran 2026-08-19 à 20.23.49](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/5/5/559f1b29efbe0b45a6130293638849fc3762bac9.jpeg) Si je clique sur « réglages » : ![Capture d’écran 2026-08-19 à 20.23.59](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/2/9/29bcc75e9c516cf1aaae7bf24cc35c74faa5d211.jpeg) Pour éditer un widget, je peux cliquer sur sa roue dentée : ![Capture d’écran 2026-08-19 à 20.24.31](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/d/c/dc5db9ce611fb5e0f8bfbe385e3e0f8f4bf5753e.jpeg) Je trouve ce nouveau design vraiment rafraîchissant et très agréable à utiliser. Sur mobile, c’est très bien optimisé aussi : ![Capture d’écran 2026-08-19 à 20.54.56](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/4/f/4f752741b883f6aa47343658e95b5c580b7d7939.jpeg) Hâte de mettre tout ça en production !! ---
**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 19, 2026, 7:03 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/32 "2026-08-19T19:03:48Z")
Hâte d’avoir ce style de tableau de bord sur ma tablette 🤩 ---
**Author:** ![MathieuA](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/mathieua/32/22211_2.png) [@MathieuA](https://community.gladysassistant.com/u/MathieuA)\ **Post date:** [Août 19, 2026, 7:24 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/33 "2026-08-19T19:24:30Z")
C’est beau et ça fait hyper vendeur mais c’est pas très efficace non ? Certains widget sont énormes pour pas grand chose. 🤔 Autre point, ça va énormément juré avec le reste de l’UI, tu prévois aussi une refonte dans le même sens ? Question bête mais comment on peut voir la demo build sur cloudflare ? Il me demande des identifiant quand j’ouvre le lien, j’imagine que c’est des identifiant de dev ? Mais lesquels ? ---
**Author:** ![Damien](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/damien/32/22156_2.png) [@Damien](https://community.gladysassistant.com/u/Damien)\ **Post date:** [Août 19, 2026, 7:39 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/34 "2026-08-19T19:39:22Z")
Peut-être qu’il sera possible d’avoir des widgets avec plusieurs tailles : par exemple, pour la météo, une version avec simplement la météo du jour et une plus grande avec les prévisions ---
**Author:** ![prohand](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/prohand/32/15713_2.png) [@prohand](https://community.gladysassistant.com/u/prohand)\ **Post date:** [Août 19, 2026, 7:42 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/35 "2026-08-19T19:42:26Z")
Très jolie design 😉 Il y a possibilité de mettre la barre de menu en haut au lieu d’être à gauche avec une option ? ---
**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 19, 2026, 8:21 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/36 "2026-08-19T20:21:00Z")
> [@MathieuA](#): > > Question bête mais comment on peut voir la demo build sur cloudflare ? Il me demande des identifiant quand j’ouvre le lien, j’imagine que c’est des identifiant de dev ? Mais lesquels ? C’est les identifiants Gladys Plus ---
**Author:** ![spenceur](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/spenceur/32/1961_2.png) [@spenceur](https://community.gladysassistant.com/u/spenceur)\ **Post date:** [Août 19, 2026, 8:49 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/37 "2026-08-19T20:49:03Z")
Quid du dark mode ? 🤔 ---
**Author:** ![mutmut](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/mutmut/32/14064_2.png) [@mutmut](https://community.gladysassistant.com/u/mutmut)\ **Post date:** [Août 19, 2026, 9:24 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/38 "2026-08-19T21:24:12Z")
PG le montre plus haut dans la discussion. ---
**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, 8:34 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/39 "2026-08-21T08:34:00Z")
@pierre-gilles, je n’ai pas pu attendre et je viens de tester les derniers commits que tu as publiés. J’ai une remarque sur la largeur du tableau de bord. Sur mon affichage, la largeur en mode Édition et en mode normal ne sont pas identiques. Le mode normal est moins large, donc les widgets sont resserrés et ce n’est pas top. Voilà quelques images: Dashboard en mode normal, les widgets ne sont pas assez larges et la 4ème colonne, le widget a trop de hauteur ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/2/2/22599f9016f99a087470dcc47dff9ce53d5ad514.jpeg) En mode Édition : L’affichage est correct ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/7/8/785f9f12651465f52c21fc7d3d834481b4fae0ab.jpeg) Pour info, j’ai le même résultat si je mets que 3 colonnes. Autre point: j’ai vu que tu as ajouté la possibilité de mettre une icone pour les nom des Dashboard. ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/4/e/4ea72dd390a281a768011adadc3227ec9aa145de.png) ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/optimized/3X/b/4/b4ccfbb5ca978e0b08c44f8974e53cbf57ce635d_2_690x54.png) Si on veux les supprimer comment fait-on? ---
**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, 10:44 UTC](https://community.gladysassistant.com/t/dashboard-mise-en-page-flexible-pouvoir-melanger-les-lignes-a-1-2-et-3-colonnes/10553/40 "2026-08-21T10:44:47Z")
> [@Will\_71](#): > > ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/optimized/3X/b/4/b4ccfbb5ca978e0b08c44f8974e53cbf57ce635d_2_690x54.png) > > Si on veux les supprimer comment fait-on? @pierre-gilles - Effectivement, pour gagner de la place, il faudrait pouvoir les supprimer - comme je ne peux pas tester, est-ce que l’ancien menu déroulant des dashboards est quand même conservé en plus des boutons à accès direct ? [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=1) [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=3)