Probleme mit der Ausrichtung des Abzeichens zum Text

spenceur · 14. August 2026 um 11:21

Hallo

Ich habe gerade ein kleines visuelles „Problem“ mit dem Badge des Update-Zählers der Integrationen bemerkt:

Ich weiß nicht, ob das beabsichtigt war, also dachte ich, ich melde es lieber

pierre-gilles · 14. August 2026 um 11:47

Gut gesehen, das ist korrigiert:

github.com/GladysAssistant/Gladys

fix(front): align integrations badge with its label in the mobile menu (#2875)

master ← claude/dropdown-badge-mobile-align-lxikng

ouvert 11:46AM - 14 Aug 26 UTC

Pierre-Gilles

+11 -0

### Description The "integrations to update" counter badge in the header menu l…ooked misplaced on mobile: it floated at the far right edge of the screen, vertically offset above the "Intégrations" row, disconnected from the label it counts. The theme styles all nav badges as `position: absolute; top: 0; right: 0` relative to the `.nav-item` (`.nav-link .badge, .nav-item .badge` in `dashboard.css`). On desktop the nav item hugs its link, so the badge lands neatly next to the text. In the collapsed mobile menu the items are stacked full-width, so the same rule sends the badge to the edge of the viewport. This makes the badge flow inline after the label below the `lg` breakpoint (the breakpoint at which `#headerMenuCollapse` switches to the stacked menu). The existing `ml-2` on the badge provides the spacing, and the `.nav-link` flex centering keeps it aligned with the text. At 390px the badge now sits directly after "Intégrations", vertically centered with it. Desktop rendering is untouched — I rendered the header markup against the theme CSS at 1200px with and without the override, and the two screenshots are byte-identical. ### Forum N/A ### Checklist - [x] Tests pass: no test touched — the change is a single CSS rule in `front/src/style/index.css`, no JS/JSX changed, so coverage on changed lines is unaffected - [x] Linter and prettier pass on both front and server — `prettier`/`eslint` are scoped to `**/*.js`, `**/*.jsx` and `**/*.json` in this repo, and no such file is modified - [x] No undocumented breaking change ## Summary by CodeRabbit * **Style** * Improved mobile header navigation layout by displaying badges inline on smaller screens. * Enhanced responsiveness for viewport widths below 991.98px.

Thema		Antworten	Aufrufe
Barre des dashboards : augmenter l'opacité du menu drop-down en desktop Configuration v5	1	48	4. September 2026
Anomalie affichage (ouverture/température) Configuration v5	2	84	4. September 2026
Mettre la barre latérale gauche en mode tiroir Demande de fonctionnalités in-progress	1	43	28. August 2026
Suggestion pour navigation dans les dashboards de la v5 Configuration v5	11	75	28. August 2026
Problème d'affichage widget Demande de fonctionnalités in-progress	1	47	18. August 2026

Probleme mit der Ausrichtung des Abzeichens zum Text

Verwandte Themen