From b1de50cbc2723635b1c5449cf4a1db4e411fb96a Mon Sep 17 00:00:00 2001
From: nBiqoz <nacim@biqoz.com>
Date: Fri, 1 Aug 2025 20:26:47 +0200
Subject: [PATCH] responsive

---
 app/components/FileUploadComponent.tsx | 29 ++++++++++++++------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/app/components/FileUploadComponent.tsx b/app/components/FileUploadComponent.tsx
index e6d6025..dcb8c87 100644
--- a/app/components/FileUploadComponent.tsx
+++ b/app/components/FileUploadComponent.tsx
@@ -330,19 +330,22 @@ export const FileUploadComponent = ({
               </div>
 
               {/* Barre du bas avec sélecteur et bouton */}
-              <div className="flex items-center justify-between p-2 border-t border-gray-200 bg-gray-50">
+              <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between p-2 border-t border-gray-200 bg-gray-50 space-y-2 sm:space-y-0">
                 {/* Sélecteur de type d'anonymisation */}
-                <div className="relative">
-                  <select
-                    className="appearance-none bg-white border border-gray-300 text-gray-700 text-xs rounded-md pl-3 pr-8 py-2 focus:outline-none focus:ring-1 focus:ring-[#f7ab6e] focus:border-[#f7ab6e] transition-colors duration-200"
-                  >
-                    <option>Information Personnellement Identifiable (PII)</option>
-                    <option disabled style={{ color: 'lightgray' }}>
-                      PII + Données Business (En développement)
-                    </option>
-                  </select>
-                  <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
-                    <svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
+                <div className="flex flex-col w-full sm:w-auto">
+                  <label className="text-xs text-gray-500 mb-1">Type de données :</label>
+                  <div className="relative">
+                    <select
+                      className="w-full sm:w-auto appearance-none bg-white border border-gray-300 text-gray-700 text-xs rounded-md pl-3 pr-8 py-2 focus:outline-none focus:ring-1 focus:ring-[#f7ab6e] focus:border-[#f7ab6e] transition-colors duration-200"
+                    >
+                      <option>Informations Personnellement Identifiables (PII)</option>
+                      <option disabled style={{ color: 'lightgray' }}>
+                        PII + Données Business (En développement)
+                      </option>
+                    </select>
+                    <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+                      <svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
+                    </div>
                   </div>
                 </div>
 
@@ -350,7 +353,7 @@ export const FileUploadComponent = ({
                 <button
                   onClick={onAnonymize}
                   disabled={isProcessing || !sourceText.trim()}
-                  className="bg-[#f7ab6e] hover:bg-[#f7ab6e]/90 disabled:opacity-50 disabled:cursor-not-allowed text-white px-4 py-2 rounded-lg text-xs font-medium transition-colors duration-300 flex items-center space-x-2 shadow-sm"
+                  className="w-full sm:w-auto bg-[#f7ab6e] hover:bg-[#f7ab6e]/90 disabled:opacity-50 disabled:cursor-not-allowed text-white px-4 py-2 rounded-lg text-xs font-medium transition-colors duration-300 flex items-center justify-center space-x-2 shadow-sm"
                   title={
                     sourceText.trim()
                       ? "Anonymiser les données"