From e04cac3345881dff83ded90d8ad6d246f76735b1 Mon Sep 17 00:00:00 2001
From: Vincent Guillet <vincent.guillet@outlook.com>
Date: Wed, 3 Dec 2025 21:49:52 +0100
Subject: [PATCH] Enhance main navbar styles for better overflow handling and
 safe area support

---
 .../main-navbar/main-navbar.component.css     | 54 ++++++++++++++++++-
 1 file changed, 53 insertions(+), 1 deletion(-)

diff --git a/client/src/app/components/main-navbar/main-navbar.component.css b/client/src/app/components/main-navbar/main-navbar.component.css
index 47dd460..7c04aa8 100644
--- a/client/src/app/components/main-navbar/main-navbar.component.css
+++ b/client/src/app/components/main-navbar/main-navbar.component.css
@@ -1,3 +1,16 @@
+/* src/app/components/main-navbar/main-navbar.component.css */
+/* Ajout prise en charge safe-area et meilleure gestion des overflow */
+
+.mat-toolbar {
+  /* protège contre les zones sensibles (notch / status bar) */
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+  position: relative;
+  z-index: 1000;
+  box-sizing: border-box;
+}
+
+/* wrapper principal */
 .container {
   max-width: 1200px;
   margin: 0 auto;
@@ -8,19 +21,22 @@
   gap: 12px;
   padding: 0 12px;
   box-sizing: border-box;
+  min-height: 56px; /* assure une hauteur minimale utile sur mobile */
 }
 
+/* marque / titre */
 .brand {
   font-weight: bold;
   font-size: 1.2rem;
   cursor: pointer;
-  min-width: 0;
+  min-width: 0; /* autorise le shrink */
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   flex: 1 1 auto;
 }
 
+/* actions (boutons, menu utilisateur) */
 .nav-actions {
   display: flex;
   gap: 0.5rem;
@@ -28,13 +44,43 @@
   flex: 0 1 auto;
   justify-content: flex-end;
   flex-wrap: nowrap;
+  min-width: 0; /* important pour permettre la réduction des enfants */
+  overflow: visible;
 }
 
+/* icône dans mat-menu */
 .mat-menu-item mat-icon {
   margin-right: 8px;
 }
 
+/* Empêcher les boutons de dépasser et couper le texte avec ellipsis */
+.nav-actions button {
+  min-width: 0;
+  max-width: 100%;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Angular Material place le texte dans .mat-button-wrapper — on le tronque proprement */
+.nav-actions button .mat-button-wrapper {
+  display: inline-block;
+  max-width: calc(100% - 56px); /* espace pour icônes + padding */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+/* Ajustements spécifiques pour petits écrans */
 @media (max-width: 720px) {
+  .mat-toolbar {
+    padding-top: env(safe-area-inset-top);
+  }
+
   .container {
     flex-wrap: wrap;
     align-items: center;
@@ -55,6 +101,7 @@
     gap: 8px;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
+    padding-bottom: 4px; /* espace pour le scroll horizontal */
   }
 
   .nav-actions button {
@@ -62,6 +109,11 @@
     font-size: 0.95rem;
     min-width: 0;
     white-space: nowrap;
+    max-width: 100%;
+  }
+
+  .nav-actions button .mat-button-wrapper {
+    max-width: calc(100% - 40px);
   }
 
   .nav-actions mat-icon {