Problemas de alineación del distintivo con el texto

spenceur · 14 Agosto, 2026 11:21

Hola

Acabo de ver un pequeño « problema » visual con el distintivo del contador de actualizaciones de las integraciones:

No sé si era intencional, así que prefiero informar de ello

pierre-gilles · 14 Agosto, 2026 11:47

Bien visto, está corregido:

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.

Tema		Respuestas	Vistas
Barre des dashboards : augmenter l'opacité du menu drop-down en desktop Configuration v5	1	50	4 Septiembre 2026
Anomalie affichage (ouverture/température) Configuration v5	2	87	4 Septiembre 2026
Mettre la barre latérale gauche en mode tiroir Demande de fonctionnalités in-progress	1	45	28 Agosto 2026
Suggestion pour navigation dans les dashboards de la v5 Configuration v5	11	81	28 Agosto 2026
Problème d'affichage widget Demande de fonctionnalités in-progress	1	50	18 Agosto 2026

Problemas de alineación del distintivo con el texto

Temas relacionados