Enhance responsiveness of navigation and product CRUD components with CSS adjustments for better layout on small screens

client/src/app/components/main-navbar/main-navbar.component.css

@@ -5,20 +5,63 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  gap: 12px;
+  padding: 0 12px;
+  box-sizing: border-box;
 }
 
 .brand {
   font-weight: bold;
   font-size: 1.2rem;
   cursor: pointer;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 0 1 auto;
 }
 
 .nav-actions {
   display: flex;
   gap: 0.5rem;
   align-items: center;
+  flex: 0 0 auto;
 }
 
 .mat-menu-item mat-icon {
   margin-right: 8px;
 }
+
+@media (max-width: 720px) {
+  .container {
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 8px;
+  }
+
+  .brand {
+    order: 1;
+    width: 100%;
+    font-size: 1.05rem;
+    margin-bottom: 4px;
+  }
+
+  .nav-actions {
+    order: 2;
+    width: 100%;
+    justify-content: flex-end;
+    gap: 8px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+
+    button {
+      padding: 6px 8px;
+      font-size: 0.95rem;
+      min-width: 0;
+    }
+
+    mat-icon {
+      font-size: 20px;
+    }
+  }
+}

client/src/app/components/ps-product-crud/ps-product-crud.component.css

@@ -3,12 +3,12 @@
   gap: 16px;
 }
 
-/* Toolbar responsive */
+
 .toolbar {
   display: flex;
   gap: 12px;
   align-items: center;
-  flex-wrap: wrap; /* permet le retour à la ligne sur petits écrans */
+  flex-wrap: wrap;
 }
 
 .toolbar .filter {
@@ -16,27 +16,23 @@
   min-width: 360px;
 }
 
-/* Tableau : container scrollable horizontalement */
 .mat-elevation-z2 {
   width: 100%;
   max-width: 100%;
-  overflow-x: auto; /* scroll interne horizontal */
-  -webkit-overflow-scrolling: touch; /* scroll fluide sur iOS */
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
-/* Table garde une largeur minimale pour activer le scroll interne */
 table {
   width: 100%;
-  min-width: 800px; /* ajuster si nécessaire selon colonnes */
+  min-width: 800px;
   border-collapse: collapse;
 }
 
-/* Prévenir les retours à la ligne pour conserver la structure de colonnes */
 th, td {
   white-space: nowrap;
 }
 
-/* Cellules et miniatures */
 .prod-cell {
   display: flex;
   align-items: center;
@@ -51,19 +47,16 @@ th, td {
   flex-shrink: 0;
 }
 
-/* Paginator : s'adapte si l'espace est réduit */
 mat-paginator {
   width: 100%;
   overflow: hidden;
 }
 
-/* Ajustements spécifiques pour petits écrans */
 @media (max-width: 720px) {
   .toolbar {
     gap: 8px;
   }
 
-  /* faire passer le filtre en full-width et placer le bouton au-dessus */
   .toolbar button {
     flex: 0 0 auto;
     order: 1;
@@ -76,13 +69,11 @@ mat-paginator {
     width: 100%;
   }
 
-  /* réduire légèrement la miniature pour économiser de l'espace */
   .prod-thumb {
     width: 24px;
     height: 24px;
   }
 
-  /* option : réduire la min-width du tableau si nécessaire */
   table {
     min-width: 720px;
   }

client/src/styles.css

@@ -8,5 +8,7 @@ body, html {
   );
 }
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}