From 103e4c055dc51d4de80db781af382c6f4473e042 Mon Sep 17 00:00:00 2001
From: Vincent Guillet <vincent.guillet@outlook.com>
Date: Wed, 26 Nov 2025 11:57:48 +0100
Subject: [PATCH] Enhance responsiveness of navigation and product CRUD
 components with CSS adjustments for better layout on small screens

---
 .../main-navbar/main-navbar.component.css     | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

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 13e1848..47dd460 100644
--- a/client/src/app/components/main-navbar/main-navbar.component.css
+++ b/client/src/app/components/main-navbar/main-navbar.component.css
@@ -18,14 +18,16 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex: 0 1 auto;
+  flex: 1 1 auto;
 }
 
 .nav-actions {
   display: flex;
   gap: 0.5rem;
   align-items: center;
-  flex: 0 0 auto;
+  flex: 0 1 auto;
+  justify-content: flex-end;
+  flex-wrap: nowrap;
 }
 
 .mat-menu-item mat-icon {
@@ -53,15 +55,17 @@
     gap: 8px;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
+  }
 
-    button {
-      padding: 6px 8px;
-      font-size: 0.95rem;
-      min-width: 0;
-    }
+  .nav-actions button {
+    padding: 6px 8px;
+    font-size: 0.95rem;
+    min-width: 0;
+    white-space: nowrap;
+  }
 
-    mat-icon {
-      font-size: 20px;
-    }
+  .nav-actions mat-icon {
+    font-size: 20px;
+    line-height: 1;
   }
 }