fix(invite): libellés courts de la barre famille sous 420 px

Sous 420 px, « Ajouter un souvenir » et « Ajouter une personne » passaient
sur deux lignes : « Souvenir » et « Personne » tiennent sur une ligne. Le
libellé complet reste en aria-label et en title.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
This commit is contained in:
IliesAllaliandClaude Haiku 5.5 committed 2026-10-19 00:08:21 +02:00
1 parent 721c8111f2
commit 6c5cacab0f
2 files changed
+13 -4

No files matched your search

@@ -355,6 +355,12 @@
white-space: normal;
text-align: center;
}
.contextual-navbar--family .nav-family-label-short { display: none; }
/* Sous 420 px, trois libellés complets passent sur deux lignes : on prend les courts, sur une ligne */
@media (max-width: 419px) {
.contextual-navbar--family .nav-family-label-full { display: none; }
.contextual-navbar--family .nav-family-label-short { display: inline; white-space: nowrap; }
}
.contextual-navbar--family .nav-more-wrapper { flex: 1; display: flex; }
.contextual-navbar--family .nav-dropdown-wrapper { margin-left: 0; align-self: center; }
/* Le zoom passe au-dessus de la barre pleine largeur */
@@ -167,13 +167,16 @@ function ContextualNavbar({
onClick={onEditClick}
active={editModeActive}
/>
<button type="button" className="nav-family-btn nav-family-btn--primary" onClick={onAddSouvenirClick}>
{/* Sous 420 px, un libellé court tient sur une ligne ; le libellé complet reste en aria-label et en title */}
<button type="button" className="nav-family-btn nav-family-btn--primary" onClick={onAddSouvenirClick} aria-label={t('Ajouter un souvenir')} title={t('Ajouter un souvenir')}>
<ImagePlus size={20} strokeWidth={2} aria-hidden="true" />
<span>{t('Ajouter un souvenir')}</span>
<span className="nav-family-label-full">{t('Ajouter un souvenir')}</span>
<span className="nav-family-label-short" aria-hidden="true">{t('Souvenir')}</span>
</button>
<button type="button" className="nav-family-btn" onClick={onAddPersonClick}>
<button type="button" className="nav-family-btn" onClick={onAddPersonClick} aria-label={t('Ajouter une personne')} title={t('Ajouter une personne')}>
<UserPlus size={20} strokeWidth={2} aria-hidden="true" />
<span>{t('Ajouter une personne')}</span>
<span className="nav-family-label-full">{t('Ajouter une personne')}</span>
<span className="nav-family-label-short" aria-hidden="true">{t('Personne')}</span>
</button>
<div ref={moreRef} className="nav-more-wrapper">
<button type="button" className={`nav-family-btn nav-family-btn--more${moreOpen ? ' is-open' : ''}`} onClick={() => setMoreOpen((v) => !v)} aria-expanded={moreOpen} aria-haspopup="menu">