Checkpoint: Titre et sous-titre sur une ligne dédiée, boutons d'action sur une ligne séparée avec flex-wrap pour éviter le défilement horizontal

client/src/pages/InvoicesBAP.tsx

@@ -461,13 +461,14 @@ export default function InvoicesBAP() {
 
   return (
     <DashboardLayout>
-      <div className="space-y-6">
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-3xl font-bold">Factures BAP</h1>
-            <p className="text-gray-500 mt-1">Factures non-abonnement (Abonnement = NON)</p>
-          </div>
-          <div className="flex gap-2">
+      <div className="space-y-4">
+        {/* En-tête : titre + sous-titre */}
+        <div>
+          <h1 className="text-3xl font-bold">Factures BAP</h1>
+          <p className="text-gray-500 mt-1">Factures non-abonnement (Abonnement = NON)</p>
+        </div>
+        {/* Barre d'actions : boutons sur une ligne dédiée avec retour à la ligne automatique */}
+        <div className="flex flex-wrap gap-2">
             <Button
               onClick={handleExportExcel}
               disabled={selectedIds.length === 0 || exportExcelMutation.isPending}
@@ -576,7 +577,6 @@ export default function InvoicesBAP() {
               <FileText className="w-4 h-4 mr-2" />
               Importer
             </Button>
-          </div>
         </div>
 
         <Card>
@@ -931,7 +931,7 @@ export default function InvoicesBAP() {
         </Card>
 
 
-      </div>
+      </div>{/* fin space-y-4 */}
 
       {/* Delete Confirmation Dialog */}
       <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>