From a7e44f0601c12007c9bcf09a23ff036d617bfada Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 14 Aug 2026 17:07:17 +0000
Subject: [PATCH 1/2] fix(magasins): make the store form modal scrollable

The store contact and SMTP sections made the form taller than the viewport
and the dialog had no scroll, cutting off the bottom fields and buttons.
The dialog now caps at 85vh with internal scrolling, slightly widened so
the two-column SMTP fields breathe.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FHdE9nEh8zHhQNGpCgrtYe
---
 client/src/pages/Groups.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/pages/Groups.tsx b/client/src/pages/Groups.tsx
index 63bc373..922db50 100644
--- a/client/src/pages/Groups.tsx
+++ b/client/src/pages/Groups.tsx
@@ -505,7 +505,7 @@ export default function Groups() {
         setSelectedGroup(null);
         setFormData({ ...EMPTY_GROUP_FORM, invoiceColumnName: "Ref Facture" });
       }}>
-        <DialogContent className="sm:max-w-md" aria-describedby="group-modal-description">
+        <DialogContent className="sm:max-w-lg max-h-[85vh] overflow-y-auto" aria-describedby="group-modal-description">
           <DialogHeader>
             <DialogTitle>
               {selectedGroup ? 'Modifier' : 'Nouveau'} Groupe

From d09821ddc02e141b04c88ffd4312d866502d4195 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 15 Aug 2026 20:57:32 +0000
Subject: [PATCH 2/2] fix(magasins): two-column store form so the modal fits
 the screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The stacked form outgrew the viewport even with internal scrolling. The
dialog widens to max-w-4xl and the form becomes a two-column grid on
desktop: identity and NocoDB configuration on the left, store contact
details and SMTP settings on the right — the SMTP section is now visible
without scrolling. Single column is preserved on small screens, and the
90vh cap with internal scroll stays as a safety net.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FHdE9nEh8zHhQNGpCgrtYe
---
 client/src/pages/Groups.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/client/src/pages/Groups.tsx b/client/src/pages/Groups.tsx
index 922db50..60b6f99 100644
--- a/client/src/pages/Groups.tsx
+++ b/client/src/pages/Groups.tsx
@@ -505,7 +505,7 @@ export default function Groups() {
         setSelectedGroup(null);
         setFormData({ ...EMPTY_GROUP_FORM, invoiceColumnName: "Ref Facture" });
       }}>
-        <DialogContent className="sm:max-w-lg max-h-[85vh] overflow-y-auto" aria-describedby="group-modal-description">
+        <DialogContent className="sm:max-w-4xl max-h-[90vh] overflow-y-auto" aria-describedby="group-modal-description">
           <DialogHeader>
             <DialogTitle>
               {selectedGroup ? 'Modifier' : 'Nouveau'} Groupe
@@ -516,6 +516,9 @@ export default function Groups() {
           </DialogHeader>
           
           <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4 items-start">
+            {/* Colonne gauche : identité + configuration NocoDB */}
+            <div className="space-y-4">
             <div>
               <Label htmlFor="name">Nom du groupe *</Label>
               <Input
@@ -716,8 +719,12 @@ export default function Groups() {
               )}
             </div>
 
+            </div>
+
+            {/* Colonne droite : coordonnées + envoi de mails */}
+            <div className="space-y-4">
             {/* Section Coordonnées du magasin (signature des mails) */}
-            <div className="border-t pt-4 space-y-4">
+            <div className="border-t md:border-t-0 pt-4 md:pt-0 space-y-4">
               <div className="flex items-center space-x-2 mb-1">
                 <div className="w-4 h-4 bg-green-500 rounded"></div>
                 <h3 className="font-medium text-gray-900">Coordonnées du magasin</h3>
@@ -916,7 +923,10 @@ export default function Groups() {
               )}
             </div>
 
-            <div className="flex items-center space-x-3 pt-4">
+            </div>
+            </div>
+
+            <div className="flex items-center space-x-3 pt-4 border-t">
               <Button
                 type="button"
                 variant="outline"