From 686512516d594a3c64bbea463f6cca63ddf5e1b8 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 9 Jul 2025 19:58:38 +0000
Subject: [PATCH] Improve application layout and elements for use on different
 screen sizes

Adds CSS classes and updates component structures to enhance responsiveness.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 91318273-c764-4fd4-be04-bdc12c38af32
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/44fdf252-fbbe-4731-95e0-abf005cc2ded.jpg
---
 client/src/components/NewSaleForm.tsx  |  73 +++++++++---------
 client/src/components/SalesHistory.tsx |  50 +++++++-----
 client/src/index.css                   |  68 +++++++++++++++++
 client/src/pages/Dashboard.tsx         | 101 +++++++++++++------------
 client/src/pages/Login.tsx             |  32 ++++----
 5 files changed, 202 insertions(+), 122 deletions(-)

diff --git a/client/src/components/NewSaleForm.tsx b/client/src/components/NewSaleForm.tsx
index b79c3ac..7b66f1a 100644
--- a/client/src/components/NewSaleForm.tsx
+++ b/client/src/components/NewSaleForm.tsx
@@ -159,29 +159,29 @@ export default function NewSaleForm() {
 
   return (
     <Card className="modern-card-elevated">
-      <CardHeader className="pb-6">
-        <CardTitle className="flex items-center gap-3 text-2xl">
-          <div className="p-2 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl">
-            <Package className="h-6 w-6 text-white" />
+      <CardHeader className="mobile-card-header">
+        <CardTitle className="flex items-center gap-2 sm:gap-3 responsive-title">
+          <div className="p-1.5 sm:p-2 bg-gradient-to-br from-green-500 to-emerald-600 rounded-lg sm:rounded-xl">
+            <Package className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
           </div>
-          Nouvelle Vente
+          <span className="truncate">Nouvelle Vente</span>
         </CardTitle>
-        <p className="text-muted-foreground mt-2">
+        <p className="text-muted-foreground mt-2 responsive-body">
           Enregistrement d'une vente de feux d'artifice
         </p>
       </CardHeader>
-      <CardContent>
+      <CardContent className="mobile-card-content">
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          <form onSubmit={form.handleSubmit(onSubmit)} className="mobile-form-responsive">
             {/* Seller Information */}
-            <div className="modern-card bg-muted/30 p-6 rounded-xl border-l-4 border-primary">
-              <h3 className="text-xl font-semibold text-foreground mb-6 flex items-center gap-3">
-                <div className="p-2 bg-primary/10 rounded-lg">
-                  <User className="h-5 w-5 text-primary" />
+            <div className="modern-card bg-muted/30 mobile-form-section rounded-xl border-l-4 border-primary">
+              <h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-2 sm:gap-3">
+                <div className="p-1.5 sm:p-2 bg-primary/10 rounded-lg">
+                  <User className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
                 </div>
-                Informations Vendeur
+                <span className="truncate">Informations Vendeur</span>
               </h3>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 mobile-gap-responsive">
                 <FormField
                   control={form.control}
                   name="vendeur"
@@ -212,14 +212,14 @@ export default function NewSaleForm() {
             </div>
 
             {/* Product Information */}
-            <div className="modern-card bg-blue-50/50 p-6 rounded-xl border-l-4 border-blue-500">
-              <h3 className="text-xl font-semibold text-foreground mb-6 flex items-center gap-3">
-                <div className="p-2 bg-blue-500/10 rounded-lg">
-                  <Package className="h-5 w-5 text-blue-600" />
+            <div className="modern-card bg-blue-50/50 mobile-form-section rounded-xl border-l-4 border-blue-500">
+              <h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-2 sm:gap-3">
+                <div className="p-1.5 sm:p-2 bg-blue-500/10 rounded-lg">
+                  <Package className="h-4 w-4 sm:h-5 sm:w-5 text-blue-600" />
                 </div>
-                Informations Produit
+                <span className="truncate">Informations Produit</span>
               </h3>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 mobile-gap-responsive">
                 <FormField
                   control={form.control}
                   name="typeArticle"
@@ -314,14 +314,14 @@ export default function NewSaleForm() {
             </div>
 
             {/* Customer Information */}
-            <div className="modern-card bg-emerald-50/50 p-6 rounded-xl border-l-4 border-emerald-500">
-              <h3 className="text-xl font-semibold text-foreground mb-6 flex items-center gap-3">
-                <div className="p-2 bg-emerald-500/10 rounded-lg">
-                  <Users className="h-5 w-5 text-emerald-600" />
+            <div className="modern-card bg-emerald-50/50 mobile-form-section rounded-xl border-l-4 border-emerald-500">
+              <h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-2 sm:gap-3">
+                <div className="p-1.5 sm:p-2 bg-emerald-500/10 rounded-lg">
+                  <Users className="h-4 w-4 sm:h-5 sm:w-5 text-emerald-600" />
                 </div>
-                Informations Client
+                <span className="truncate">Informations Client</span>
               </h3>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 mobile-gap-responsive">
                 <FormField
                   control={form.control}
                   name="nom"
@@ -378,16 +378,16 @@ export default function NewSaleForm() {
             </div>
 
             {/* Identity Information */}
-            <div className="modern-card bg-amber-50/50 p-6 rounded-xl border-l-4 border-amber-500">
-              <h3 className="text-xl font-semibold text-foreground mb-6 flex items-center gap-3">
-                <div className="p-2 bg-amber-500/10 rounded-lg">
-                  <svg className="h-5 w-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div className="modern-card bg-amber-50/50 mobile-form-section rounded-xl border-l-4 border-amber-500">
+              <h3 className="mobile-header-responsive font-semibold text-foreground mb-4 sm:mb-6 flex items-center gap-2 sm:gap-3">
+                <div className="p-1.5 sm:p-2 bg-amber-500/10 rounded-lg">
+                  <svg className="h-4 w-4 sm:h-5 sm:w-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
                   </svg>
                 </div>
-                Pièce d'Identité
+                <span className="truncate">Pièce d'Identité</span>
               </h3>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 mobile-gap-responsive">
                 <FormField
                   control={form.control}
                   name="typeIdentite"
@@ -455,12 +455,12 @@ export default function NewSaleForm() {
             </div>
 
             {/* Form Actions */}
-            <div className="flex justify-end space-x-4 pt-8 mt-8 border-t border-border/50">
+            <div className="flex flex-col sm:flex-row justify-end gap-3 sm:gap-4 pt-6 sm:pt-8 mt-6 sm:mt-8 border-t border-border/50">
               <Button 
                 type="button" 
                 variant="outline" 
                 size="lg"
-                className="border-2 hover:bg-muted smooth-transition"
+                className="border-2 hover:bg-muted smooth-transition touch-friendly-button order-2 sm:order-1"
                 onClick={() => {
                 form.reset({
                   vendeur: '',
@@ -486,10 +486,11 @@ export default function NewSaleForm() {
                 type="submit" 
                 size="lg"
                 disabled={isSubmitting || createSaleMutation.isPending}
-                className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white border-0 shadow-lg hover:shadow-xl hover:scale-[1.02] smooth-transition"
+                className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white border-0 shadow-lg hover:shadow-xl hover:scale-[1.02] smooth-transition touch-friendly-button order-1 sm:order-2"
               >
                 <Save className="h-5 w-5 mr-2" />
-                {isSubmitting || createSaleMutation.isPending ? 'Enregistrement...' : 'Enregistrer la Vente'}
+                <span className="hidden sm:inline">{isSubmitting || createSaleMutation.isPending ? 'Enregistrement...' : 'Enregistrer la Vente'}</span>
+                <span className="sm:hidden">{isSubmitting || createSaleMutation.isPending ? 'Enregistrement...' : 'Enregistrer'}</span>
               </Button>
             </div>
           </form>
diff --git a/client/src/components/SalesHistory.tsx b/client/src/components/SalesHistory.tsx
index ea9c679..8bbeabe 100644
--- a/client/src/components/SalesHistory.tsx
+++ b/client/src/components/SalesHistory.tsx
@@ -143,37 +143,45 @@ export default function SalesHistory({ canDelete = false }: SalesHistoryProps) {
   };
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <History className="h-5 w-5" />
-          Historique des Ventes
+    <Card className="modern-card-elevated">
+      <CardHeader className="mobile-card-header">
+        <CardTitle className="flex items-center gap-2 sm:gap-3 responsive-title">
+          <div className="p-1.5 sm:p-2 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg sm:rounded-xl">
+            <History className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
+          </div>
+          <span className="truncate">Historique des Ventes</span>
         </CardTitle>
+        <p className="text-muted-foreground mt-2 responsive-body">
+          Consultation et gestion des ventes enregistrées
+        </p>
       </CardHeader>
-      <CardContent className="space-y-4">
+      <CardContent className="mobile-card-content mobile-form-responsive">
         {/* Filters */}
-        <div className="flex gap-4 items-end">
-          <div className="grid grid-cols-2 gap-4 flex-1">
+        <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 items-start sm:items-end mobile-form-section bg-muted/30 rounded-xl border border-border/50">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 flex-1 w-full">
             <div>
-              <label className="text-sm font-medium">Date de début</label>
+              <label className="responsive-caption font-medium">Date de début</label>
               <Input
                 type="date"
                 value={startDate}
                 onChange={(e) => setStartDate(e.target.value)}
+                className="responsive-body"
               />
             </div>
             <div>
-              <label className="text-sm font-medium">Date de fin</label>
+              <label className="responsive-caption font-medium">Date de fin</label>
               <Input
                 type="date"
                 value={endDate}
                 onChange={(e) => setEndDate(e.target.value)}
+                className="responsive-body"
               />
             </div>
           </div>
-          <Button onClick={exportToCSV} variant="outline">
+          <Button onClick={exportToCSV} variant="outline" className="touch-friendly-button w-full sm:w-auto">
             <Download className="h-4 w-4 mr-2" />
-            Export CSV
+            <span className="hidden sm:inline">Export CSV</span>
+            <span className="sm:hidden">CSV</span>
           </Button>
         </div>
 
@@ -183,21 +191,21 @@ export default function SalesHistory({ canDelete = false }: SalesHistoryProps) {
             <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
           </div>
         ) : sales.length === 0 ? (
-          <div className="text-center py-8 text-muted-foreground">
+          <div className="text-center py-8 text-muted-foreground responsive-body">
             Aucune vente trouvée
           </div>
         ) : (
-          <div className="rounded-md border">
+          <div className="rounded-md border overflow-x-auto">
             <Table>
               <TableHeader>
                 <TableRow>
-                  <TableHead>Date/Heure</TableHead>
-                  <TableHead>Vendeur</TableHead>
-                  <TableHead>Client</TableHead>
-                  <TableHead>Article</TableHead>
-                  <TableHead>Quantité</TableHead>
-                  <TableHead>Gencode</TableHead>
-                  <TableHead>Actions</TableHead>
+                  <TableHead className="responsive-caption">Date/Heure</TableHead>
+                  <TableHead className="responsive-caption">Vendeur</TableHead>
+                  <TableHead className="responsive-caption">Client</TableHead>
+                  <TableHead className="responsive-caption">Article</TableHead>
+                  <TableHead className="responsive-caption">Quantité</TableHead>
+                  <TableHead className="responsive-caption hidden sm:table-cell">Gencode</TableHead>
+                  <TableHead className="responsive-caption">Actions</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
diff --git a/client/src/index.css b/client/src/index.css
index fb4ebfd..6dc1329 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -191,6 +191,74 @@
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
   }
 
+  /* Mobile responsive utilities */
+  .mobile-padding {
+    @apply px-3 sm:px-4 md:px-6 lg:px-8;
+  }
+
+  .mobile-text-responsive {
+    @apply text-sm sm:text-base lg:text-lg;
+  }
+
+  .mobile-header-responsive {
+    @apply text-lg sm:text-xl lg:text-2xl;
+  }
+
+  .mobile-button-responsive {
+    @apply text-xs sm:text-sm lg:text-base px-3 sm:px-4 py-2 sm:py-2.5;
+  }
+
+  .mobile-grid-responsive {
+    @apply grid-cols-1 sm:grid-cols-2 lg:grid-cols-3;
+  }
+
+  .mobile-gap-responsive {
+    @apply gap-2 sm:gap-4 lg:gap-6;
+  }
+
+  .mobile-form-responsive {
+    @apply space-y-4 sm:space-y-6 lg:space-y-8;
+  }
+
+  /* Touch-friendly interactive elements */
+  .touch-friendly {
+    @apply min-h-[44px] min-w-[44px];
+  }
+
+  .touch-friendly-button {
+    @apply h-11 sm:h-10 lg:h-9 px-4 sm:px-3 lg:px-4;
+  }
+
+  /* Responsive text sizes */
+  .responsive-title {
+    @apply text-xl sm:text-2xl lg:text-3xl;
+  }
+
+  .responsive-subtitle {
+    @apply text-sm sm:text-base lg:text-lg;
+  }
+
+  .responsive-body {
+    @apply text-sm sm:text-base;
+  }
+
+  .responsive-caption {
+    @apply text-xs sm:text-sm;
+  }
+
+  /* Mobile-first form improvements */
+  .mobile-form-section {
+    @apply p-4 sm:p-6 lg:p-8;
+  }
+
+  .mobile-card-header {
+    @apply p-4 sm:p-6 lg:p-8;
+  }
+
+  .mobile-card-content {
+    @apply p-4 sm:p-6 lg:p-8;
+  }
+
   /* Animation keyframes */
   @keyframes slideInRight {
     from {
diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx
index 1653c5d..f7f3537 100644
--- a/client/src/pages/Dashboard.tsx
+++ b/client/src/pages/Dashboard.tsx
@@ -41,32 +41,32 @@ function DashboardContent() {
     <div className="min-h-screen bg-background">
       {/* Modern Header */}
       <header className="sticky top-0 z-50 border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <div className="flex items-center gap-4">
+        <div className="max-w-7xl mx-auto mobile-padding">
+          <div className="flex justify-between items-center h-14 sm:h-16">
+            <div className="flex items-center gap-2 sm:gap-4">
               <div className="relative">
-                <div className="p-2 bg-gradient-to-br from-primary to-purple-600 rounded-xl shadow-sm">
-                  <Package className="h-6 w-6 text-white" />
+                <div className="p-1.5 sm:p-2 bg-gradient-to-br from-primary to-purple-600 rounded-lg sm:rounded-xl shadow-sm">
+                  <Package className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
                 </div>
-                <div className="absolute -inset-1 bg-gradient-to-br from-primary to-purple-600 rounded-xl blur opacity-20 -z-10"></div>
+                <div className="absolute -inset-1 bg-gradient-to-br from-primary to-purple-600 rounded-lg sm:rounded-xl blur opacity-20 -z-10"></div>
               </div>
-              <div>
-                <h1 className="text-xl font-bold gradient-text">RegisFlow</h1>
-                <p className="text-sm text-muted-foreground">Registre des ventes des Feux d'artifice</p>
+              <div className="min-w-0">
+                <h1 className="text-lg sm:text-xl font-bold gradient-text truncate">RegisFlow</h1>
+                <p className="text-xs sm:text-sm text-muted-foreground hidden sm:block">Registre des ventes des Feux d'artifice</p>
               </div>
             </div>
             
-            <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2 sm:gap-4">
               {/* Store Selector for Admin */}
               {isAdmin && !isLoadingStores && (
-                <div className="flex items-center gap-3 p-2 bg-muted/50 rounded-lg border border-border/50">
+                <div className="hidden sm:flex items-center gap-2 sm:gap-3 p-1.5 sm:p-2 bg-muted/50 rounded-lg border border-border/50">
                   <Building2 className="h-4 w-4 text-muted-foreground" />
                   <Select 
                     value={selectedStoreId?.toString() || ""} 
                     onValueChange={(value) => setSelectedStoreId(parseInt(value))}
                   >
-                    <SelectTrigger className="w-48 border-0 bg-transparent focus:ring-0">
-                      <SelectValue placeholder="Sélectionner un magasin" />
+                    <SelectTrigger className="w-32 sm:w-48 border-0 bg-transparent focus:ring-0 text-sm">
+                      <SelectValue placeholder="Magasin" />
                     </SelectTrigger>
                     <SelectContent>
                       {stores.map((store) => (
@@ -81,14 +81,14 @@ function DashboardContent() {
 
               {/* Current Store Display for Non-Admin */}
               {!isAdmin && selectedStore && (
-                <div className="flex items-center gap-2 px-3 py-2 bg-muted/50 rounded-lg border border-border/50">
+                <div className="hidden sm:flex items-center gap-2 px-2 sm:px-3 py-1.5 sm:py-2 bg-muted/50 rounded-lg border border-border/50">
                   <Building2 className="h-4 w-4 text-primary" />
                   <span className="text-sm font-medium">{selectedStore.name}</span>
                 </div>
               )}
 
-              <div className="flex items-center gap-3">
-                <div className="text-right">
+              <div className="flex items-center gap-1 sm:gap-3">
+                <div className="text-right hidden sm:block">
                   <p className="text-sm font-semibold text-foreground">
                     {user?.firstName} {user?.lastName}
                   </p>
@@ -101,10 +101,10 @@ function DashboardContent() {
                   variant="outline" 
                   size="sm" 
                   onClick={handleLogout}
-                  className="border-2 hover:bg-destructive hover:text-destructive-foreground hover:border-destructive smooth-transition"
+                  className="border-2 hover:bg-destructive hover:text-destructive-foreground hover:border-destructive smooth-transition touch-friendly-button"
                 >
-                  <LogOut className="h-4 w-4 mr-2" />
-                  Déconnexion
+                  <LogOut className="h-4 w-4 sm:mr-2" />
+                  <span className="hidden sm:inline">Déconnexion</span>
                 </Button>
               </div>
             </div>
@@ -113,38 +113,38 @@ function DashboardContent() {
       </header>
 
       {/* Main Content */}
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <main className="max-w-7xl mx-auto mobile-padding py-4 sm:py-6 lg:py-8">
         {selectedStore && (
-          <div className="mb-8 slide-in-up">
+          <div className="mb-6 sm:mb-8 slide-in-up">
             <Card className="modern-card-elevated overflow-hidden">
-              <CardContent className="pt-6">
-                <div className="flex items-center gap-6">
-                  <div className="relative">
-                    <div className="p-4 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl shadow-lg">
-                      <Building2 className="h-8 w-8 text-white" />
+              <CardContent className="mobile-card-content">
+                <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6">
+                  <div className="relative flex-shrink-0">
+                    <div className="p-3 sm:p-4 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl sm:rounded-2xl shadow-lg">
+                      <Building2 className="h-6 w-6 sm:h-8 sm:w-8 text-white" />
                     </div>
-                    <div className="absolute -inset-2 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl blur opacity-20 -z-10"></div>
+                    <div className="absolute -inset-2 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl sm:rounded-2xl blur opacity-20 -z-10"></div>
                   </div>
-                  <div className="flex-1">
-                    <h2 className="text-2xl font-bold text-foreground mb-2">{selectedStore.name}</h2>
-                    <div className="space-y-1">
+                  <div className="flex-1 min-w-0">
+                    <h2 className="text-xl sm:text-2xl font-bold text-foreground mb-2 truncate">{selectedStore.name}</h2>
+                    <div className="space-y-1 sm:space-y-2">
                       {selectedStore.address && (
-                        <p className="text-muted-foreground flex items-center gap-2">
-                          <span className="w-4 h-4 flex items-center justify-center">📍</span>
-                          {selectedStore.address}
+                        <p className="text-muted-foreground flex items-start gap-2 text-sm sm:text-base">
+                          <span className="w-4 h-4 flex items-center justify-center flex-shrink-0 mt-0.5">📍</span>
+                          <span className="break-words">{selectedStore.address}</span>
                         </p>
                       )}
-                      <div className="flex gap-6 text-sm">
+                      <div className="flex flex-col sm:flex-row gap-2 sm:gap-6 text-sm">
                         {selectedStore.phone && (
                           <span className="text-muted-foreground flex items-center gap-2">
-                            <span className="w-4 h-4 flex items-center justify-center">📞</span>
-                            {selectedStore.phone}
+                            <span className="w-4 h-4 flex items-center justify-center flex-shrink-0">📞</span>
+                            <span className="break-all">{selectedStore.phone}</span>
                           </span>
                         )}
                         {selectedStore.email && (
                           <span className="text-muted-foreground flex items-center gap-2">
-                            <span className="w-4 h-4 flex items-center justify-center">✉️</span>
-                            {selectedStore.email}
+                            <span className="w-4 h-4 flex items-center justify-center flex-shrink-0">✉️</span>
+                            <span className="break-all">{selectedStore.email}</span>
                           </span>
                         )}
                       </div>
@@ -157,29 +157,32 @@ function DashboardContent() {
         )}
 
         <div className="fade-in">
-          <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-8">
-            <TabsList className={`grid w-full ${canAccessAdmin ? 'grid-cols-3' : 'grid-cols-2'} max-w-2xl h-14 bg-muted/50 p-2 rounded-2xl border border-border/50`}>
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="mobile-form-responsive">
+            <TabsList className={`grid w-full ${canAccessAdmin ? 'grid-cols-3' : 'grid-cols-2'} max-w-full sm:max-w-2xl h-12 sm:h-14 bg-muted/50 p-1.5 sm:p-2 rounded-xl sm:rounded-2xl border border-border/50`}>
               <TabsTrigger 
                 value="new-sale" 
-                className="h-10 rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium"
+                className="h-9 sm:h-10 rounded-lg sm:rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium text-xs sm:text-sm"
               >
-                <Package className="h-5 w-5 mr-2" />
-                Nouvelle Vente
+                <Package className="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" />
+                <span className="hidden sm:inline">Nouvelle Vente</span>
+                <span className="sm:hidden">Vente</span>
               </TabsTrigger>
               <TabsTrigger 
                 value="history" 
-                className="h-10 rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium"
+                className="h-9 sm:h-10 rounded-lg sm:rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium text-xs sm:text-sm"
               >
-                <History className="h-5 w-5 mr-2" />
-                Historique
+                <History className="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" />
+                <span className="hidden sm:inline">Historique</span>
+                <span className="sm:hidden">Liste</span>
               </TabsTrigger>
               {canAccessAdmin && (
                 <TabsTrigger 
                   value="admin" 
-                  className="h-10 rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium"
+                  className="h-9 sm:h-10 rounded-lg sm:rounded-xl data-[state=active]:bg-background data-[state=active]:shadow-md smooth-transition font-medium text-xs sm:text-sm"
                 >
-                  <Settings className="h-5 w-5 mr-2" />
-                  Administration
+                  <Settings className="h-4 w-4 sm:h-5 sm:w-5 mr-1 sm:mr-2" />
+                  <span className="hidden sm:inline">Administration</span>
+                  <span className="sm:hidden">Admin</span>
                 </TabsTrigger>
               )}
             </TabsList>
diff --git a/client/src/pages/Login.tsx b/client/src/pages/Login.tsx
index 0b929c8..0bd4886 100644
--- a/client/src/pages/Login.tsx
+++ b/client/src/pages/Login.tsx
@@ -51,7 +51,7 @@ export default function Login() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center gradient-bg p-4 relative overflow-hidden">
+    <div className="min-h-screen flex items-center justify-center gradient-bg mobile-padding py-4 relative overflow-hidden">
       {/* Background decoration */}
       <div className="absolute inset-0 overflow-hidden">
         <div className="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-white/20 to-white/5 rounded-full blur-3xl"></div>
@@ -59,33 +59,33 @@ export default function Login() {
       </div>
       
       <Card className="w-full max-w-md modern-card-elevated backdrop-blur-sm bg-white/90 border-white/20 slide-in-up relative z-10">
-        <CardHeader className="text-center space-y-6 pb-8">
+        <CardHeader className="text-center space-y-4 sm:space-y-6 mobile-card-header">
           <div className="flex justify-center">
             <div className="relative">
-              <div className="p-4 bg-gradient-to-br from-primary to-purple-600 rounded-2xl shadow-lg">
-                <Sparkles className="h-8 w-8 text-white" />
+              <div className="p-3 sm:p-4 bg-gradient-to-br from-primary to-purple-600 rounded-xl sm:rounded-2xl shadow-lg">
+                <Sparkles className="h-6 w-6 sm:h-8 sm:w-8 text-white" />
               </div>
-              <div className="absolute -inset-2 bg-gradient-to-br from-primary to-purple-600 rounded-2xl blur opacity-20 -z-10"></div>
+              <div className="absolute -inset-2 bg-gradient-to-br from-primary to-purple-600 rounded-xl sm:rounded-2xl blur opacity-20 -z-10"></div>
             </div>
           </div>
           <div className="space-y-2">
-            <CardTitle className="text-3xl font-bold gradient-text">RegisFlow</CardTitle>
-            <p className="text-muted-foreground text-lg">Registre des ventes des Feux d'artifice</p>
+            <CardTitle className="responsive-title font-bold gradient-text">RegisFlow</CardTitle>
+            <p className="text-muted-foreground responsive-subtitle">Registre des ventes des Feux d'artifice</p>
           </div>
         </CardHeader>
-        <CardContent className="space-y-6">
+        <CardContent className="mobile-card-content space-y-4 sm:space-y-6">
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <form onSubmit={form.handleSubmit(onSubmit)} className="mobile-form-responsive">
               <FormField
                 control={form.control}
                 name="username"
                 render={({ field }) => (
-                  <FormItem className="space-y-3">
-                    <FormLabel className="text-sm font-semibold text-foreground">Nom d'utilisateur</FormLabel>
+                  <FormItem className="space-y-2 sm:space-y-3">
+                    <FormLabel className="responsive-body font-semibold text-foreground">Nom d'utilisateur</FormLabel>
                     <FormControl>
                       <Input 
                         placeholder="Votre nom d'utilisateur" 
-                        className="h-12 text-base border-2 border-border/50 focus:border-primary bg-background/50 backdrop-blur-sm smooth-transition" 
+                        className="touch-friendly responsive-body border-2 border-border/50 focus:border-primary bg-background/50 backdrop-blur-sm smooth-transition" 
                         {...field} 
                       />
                     </FormControl>
@@ -97,13 +97,13 @@ export default function Login() {
                 control={form.control}
                 name="password"
                 render={({ field }) => (
-                  <FormItem className="space-y-3">
-                    <FormLabel className="text-sm font-semibold text-foreground">Mot de passe</FormLabel>
+                  <FormItem className="space-y-2 sm:space-y-3">
+                    <FormLabel className="responsive-body font-semibold text-foreground">Mot de passe</FormLabel>
                     <FormControl>
                       <Input 
                         type="password" 
                         placeholder="Votre mot de passe" 
-                        className="h-12 text-base border-2 border-border/50 focus:border-primary bg-background/50 backdrop-blur-sm smooth-transition" 
+                        className="touch-friendly responsive-body border-2 border-border/50 focus:border-primary bg-background/50 backdrop-blur-sm smooth-transition" 
                         {...field} 
                       />
                     </FormControl>
@@ -113,7 +113,7 @@ export default function Login() {
               />
               <Button 
                 type="submit" 
-                className="w-full h-12 text-base font-semibold bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 hover:shadow-lg hover:scale-[1.02] smooth-transition" 
+                className="w-full touch-friendly responsive-body font-semibold bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 hover:shadow-lg hover:scale-[1.02] smooth-transition" 
                 disabled={isLoggingIn}
               >
                 <LogIn className="h-5 w-5 mr-2" />