Dashboard - Flexibles Layout: Zeilen mit 1, 2 und 3 Spalten mischen

pierre-gilles · 21. August 2026 um 12:23

Tatsächlich, ich schaue mal nach! Danke

Übrigens, ich weiß nicht, ob du die Breite „Volle Breite“ getestet hast, mit einem so breiten Bildschirm, das wäre bei dir wunderschön Du kannst sogar eine Spalte oder eine Doppeltbreite Spalte einfügen, um zum Beispiel die Ansicht deines Hauses zu platzieren, und bis zu 6 Spalten, das wäre einfach zu schön!

In jedem Fall müssen wir unsere Dashboards anpassen, um alle diese Möglichkeiten voll auszunutzen

Ich werde mal schauen!

Die Idee wäre, die Symbole, die du im Namen platziert hast, in die dedizierten Symbole des Dashboards zu migrieren. Sie wären dann auf allen Plattformen einheitlich. Die Emojis wurden je nach System (iOS, macOS, Windows…) unterschiedlich dargestellt, und die von Windows sind, sagen wir mal… wirklich nicht toll

Nein!

b3n.0 · 21. August 2026 um 12:31

Emotionen im Überfluss beim Lesen dieses Threads…
das ist komplett verrückt,
gigantisch,

ich kann es kaum erwarten…

Will_71 · 21. August 2026 um 12:56

Ich habe es getestet, aber in voller Breite finde ich es ein bisschen zu groß

pierre-gilles · 21. August 2026 um 12:57

Wenn es darum geht, 4 Widgets zu platzieren, ist es natürlich zu breit. Der Sinn der vollen Breite ist es, den Platz besser zu nutzen: mehr Spalten oder bestimmte Spalten in doppelter Breite, um beispielsweise eine Ansicht deines Hauses anzuzeigen

Will_71 · 21. August 2026 um 13:09

Hier mit 6 Spalten, da muss man sicherlich nochmal ran, um die Dashboards mit diesem schönen Thema neu zu machen. Und es stimmt schon, zurückzugehen ist komisch.

Aber mein Dashboard kann ich auf meinem großen Bildschirm und auf einem Tablet anzeigen lassen. Wenn ich die Größe jedoch verkleinere, gibt es einen Punkt, an dem die Widgets nicht mehr folgen. Ich habe die Auflösung oben eingestellt, damit du es dir vorstellen kannst

pierre-gilles · 21. August 2026 um 13:13

Ah ja, tatsächlich Ich werde mal schauen!

Chris75 · 21. August 2026 um 13:26

et wie sieht es auf dem Handy aus?

pierre-gilles · 21. August 2026 um 14:27

Das ist in master behoben.

Will_71 · 21. August 2026 um 14:45

Ich versuche es später nochmal, ich halte dich auf dem Laufenden.

Will_71 · 21. August 2026 um 23:16

@pierre-gilles Das, was mich bei den Icons stört, ist, dass es als optional angegeben ist, aber eigentlich nicht, weil es ein Standard-Icon gibt (das Haus)

Und ich würde gerne keins verwenden

Will_71 · 21. August 2026 um 23:52

Ich habe immer noch einen Unterschied zwischen dem Bearbeitungsmodus und dem normalen Modus

Wenn ich die Breite verringere, wird es besser, aber es ist noch nicht perfekt

Es kippt bei mehr als 990 Pixeln Breite

cicoub13 · 22. August 2026 um 07:29

Zwei Rückmeldungen zur mobilen Ansicht der Szenen

Es gibt keinen Abstand zwischen den Szenen
Der Titel ist kaum lesbar

cicoub13 · 22. August 2026 um 07:32

Der Zeitauswahl für Geplante Auslösung befindet sich unter der Reihe

cicoub13 · 22. August 2026 um 09:32

Und drei PRs zum Fixen

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. August 2026 um 07:09

Danke für alle Fixes @cicoub13, alles ist gut für mich, alles ist in der Merge-Warteschlange

guim31 · 24. August 2026 um 08:47

Kann es kaum erwarten !!!

pierre-gilles · 24. August 2026 um 08:58

Seit der neuen Registerkartenleiste auf Mobilgeräten und im Tablet-Modus (Wandpaneel) werden die Registerkarten auf ihr Icon reduziert, was es ermöglicht, viele ohne ein zu öffnendes Menü anzuzeigen.

Das Icon ist in diesen Modi kein dekoratives Detail, sondern die Identität der Registerkarte.

Was sich ändert

Bei der Erstellung eines Dashboards muss nun ein Icon gewählt werden, genauso wie der Name. Dies gilt nur für die Erstellung: Bestehende Dashboards werden nicht betroffen, und das Feld bleibt auf der API-Seite optional.

Und die aktuellen Dashboards?

Hier wird es interessant. Viele von euch setzen bereits ein Emoji als Präfix zum Namen ein: « Kino », « Wohnzimmer », « Temperaturen »…

Gladys erkennt jetzt das Emoji am Anfang des Namens und übersetzt es in das entsprechende Icon: → Couch, → Klappe, → Thermometer, → Auto, → Glühbirne, → Bett, → Katze… 388 Emojis sind abgedeckt (Häuser und Räume, Küche, Elektrogeräte, Multimedia, Energie und Licht, Sicherheit, Werkzeuge, Gesundheit, Wetter, Garten, Tiere, Transport, Flaggen…). Das Emoji wird aus der Registerkartenbeschriftung entfernt, um eine doppelte Markierung zu vermeiden.

Es ist eine temporäre Lösung, damit die Dashboards direkt gut aussehen, aber ich ermutige euch sehr, eure Dashboards zu migrieren, sobald es in Produktion ist

Will_71 · 24. August 2026 um 09:53

Okay, deine Erklärung ist super.

Ich habe es gerade versucht, die Umwandlung hat funktioniert, außer bei einigen, bei denen es keine Entsprechung geben sollte. Ich werde es manuell machen, denn ich werde alle meine Dashboards ohnehin überarbeiten!

Will_71 · 24. August 2026 um 10:06

Hier sind meine Rückmeldungen zur Anzeige:

Bug in den Widget-Einstellungen: Wenn man ein Dropdown-Menü öffnet, bewegt sich das Auswahlfenster beim Scrollen mit.
Auf dem Bild unten bin ich bei „Gerätefunktion“ und das Fenster ist nach oben gerutscht

Im Schnellaktionen-Widget: Wenn der Name lang ist, läuft er über (der Name ist nur ein Beispiel ). Wenn ich Leerzeichen einfüge, gibt es einen Zeilenumbruch. Zur Info habe ich in meinem Abschnitt 6 Spalten.

Das Temperatur-/Feuchtigkeits-Widget hat im Bearbeitungsmodus nicht die gleiche Größe wie im normalen Modus

Ich liebe das Binärdiagramm über die gesamte Breite meines Bildschirms

cursor-bot · 24. August 2026 um 11:51

Hallo zusammen!

Dieses Thema ist nun in Entwicklung.

Ein Pull Request wurde erstellt, um das Select-Menü zu beheben, das sich beim Scrollen im Bearbeitungsfeld löst, und die zu langen Aktionsnamen, die aus dem Widget herausragen:

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.

Zögert nicht, dem PR zu folgen, zu testen (optional, vor allem bei kleinen Anfragen) und euer Feedback hier zu hinterlassen, falls nötig.

Thema		Antworten	Aufrufe
Gladys v4.16 : Améliorations UX tableau de bord + AQI + limitation logs Zigbee2mqtt Actualités	52	1686	14. Februar 2023
Multi-Dashboard Demandes livrées feature-core	30	1955	4. September 2021
Récupération de graphiques et de leurs valeurs sur 24 heures depuis des périodes antérieures Demandes livrées	11	439	7. August 2026
Problème image dans les widgets (navigateur desktop) Configuration v5	26	164	29. August 2026
Pouvoir trier la liste des Dashboards Demandes livrées dashboard , feature-core , feature-request-ux	35	1411	3. Februar 2023

Dashboard - Flexibles Layout: Zeilen mit 1, 2 und 3 Spalten mischen

Verwandte Themen