From b9320c73837bb138be738ee2d5aad8e33c95aa92 Mon Sep 17 00:00:00 2001
From: Vincent Guillet <vincent.guillet@outlook.com>
Date: Wed, 26 Nov 2025 09:34:20 +0100
Subject: [PATCH] Enhance responsiveness of product CRUD component with CSS
 adjustments for toolbar and table layout

---
 .../ps-product-crud.component.css             | 58 ++++++++++++++++++-
 1 file changed, 57 insertions(+), 1 deletion(-)

diff --git a/client/src/app/components/ps-product-crud/ps-product-crud.component.css b/client/src/app/components/ps-product-crud/ps-product-crud.component.css
index 65d931e..65497f0 100644
--- a/client/src/app/components/ps-product-crud/ps-product-crud.component.css
+++ b/client/src/app/components/ps-product-crud/ps-product-crud.component.css
@@ -3,10 +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 */
 }
 
 .toolbar .filter {
@@ -14,10 +16,27 @@
   min-width: 360px;
 }
 
-table {
+/* 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 */
 }
 
+/* Table garde une largeur minimale pour activer le scroll interne */
+table {
+  width: 100%;
+  min-width: 800px; /* ajuster si nécessaire selon colonnes */
+  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;
@@ -31,3 +50,40 @@ table {
   border-radius: 4px;
   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;
+  }
+
+  .toolbar .filter {
+    order: 2;
+    margin-left: 0;
+    min-width: 0;
+    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;
+  }
+}