Enhance responsiveness of product CRUD component with CSS adjustments for toolbar and table layout

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;
+  }
+}

client/src/app/pages/auth/register/register.component.ts

@@ -56,6 +56,11 @@ export class RegisterComponent implements OnDestroy {
   isSubmitted = false;
   isLoading = false;
 
+  private readonly passwordPattern: RegExp = new RegExp(
+    '^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[\\p{P}\\p{S}]).{8,}$',
+    'u'
+  );
+
   private readonly router: Router = inject(Router);
   private readonly authService: AuthService = inject(AuthService);
 
@@ -90,14 +95,14 @@ export class RegisterComponent implements OnDestroy {
       password: ['', [
         Validators.required,
         Validators.minLength(8),
-        Validators.maxLength(20),
+        Validators.maxLength(50),
-        Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{8,}$')
+        Validators.pattern(this.passwordPattern)
       ]],
       confirmPassword: ['', [
         Validators.required,
         Validators.minLength(8),
-        Validators.maxLength(20),
+        Validators.maxLength(50),
-        Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{8,}$')
+        Validators.pattern(this.passwordPattern)
       ]],
       termsAndConditions: [false, Validators.requiredTrue]
     }, {validators: this.passwordMatchValidator});