From 6c5cacab0fdca49f8a7a8997cfe26e56afe0f028 Mon Sep 17 00:00:00 2001
From: IliesAllali <pro.allali.ilies@gmail.com>
Date: Mon, 19 Oct 2026 00:08:21 +0200
Subject: [PATCH] =?UTF-8?q?fix(invite):=20libell=C3=A9s=20courts=20de=20la?=
 =?UTF-8?q?=20barre=20famille=20sous=20420=20px?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/components/navbar/ContextualNavbar.css |  6 ++++++
 frontend/src/components/navbar/ContextualNavbar.jsx | 11 +++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/navbar/ContextualNavbar.css b/frontend/src/components/navbar/ContextualNavbar.css
index 564c8c1..afa8203 100644
--- a/frontend/src/components/navbar/ContextualNavbar.css
+++ b/frontend/src/components/navbar/ContextualNavbar.css
@@ -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 */
diff --git a/frontend/src/components/navbar/ContextualNavbar.jsx b/frontend/src/components/navbar/ContextualNavbar.jsx
index aca6715..94ebbc1 100644
--- a/frontend/src/components/navbar/ContextualNavbar.jsx
+++ b/frontend/src/components/navbar/ContextualNavbar.jsx
@@ -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">