Badge alignment issues with text

spenceur · August 14, 2026, 11:21am

Hello

I just noticed a small visual « issue » with the integration update counter badge:

I don’t know if this was intentional, so I’d rather report it

pierre-gilles · August 14, 2026, 11:47am

Well spotted, it’s fixed:

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.

Topic		Replies	Views
Problème d'affichage widget Demande de fonctionnalités in-progress	1	36	August 18, 2026
Correction diverses UX Développement ux	11	105	July 2, 2026
Pouvoir trier la liste des Dashboards Demandes livrées dashboard , feature-core , feature-request-ux	35	1326	February 3, 2023
Problème affichage intégration externe Z2M devices monitor Configuration	8	28	August 17, 2026
Pb sur affichage "changement d'état de l'appareil" Demande de fonctionnalités in-progress	1	33	August 18, 2026

Badge alignment issues with text

Related topics