Improve responsiveness and adjust button sizes for better mobile experience

Update padding and button sizes across various components to enhance mobile view and optimize user interaction.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/pCkJ6mk

.replit

@@ -30,10 +30,6 @@ externalPort = 4200
 localPort = 40537
 externalPort = 3000
 
-[[ports]]
-localPort = 42011
-externalPort = 5000
-
 [[ports]]
 localPort = 43245
 externalPort = 3001

client/src/components/ui/button.tsx

@@ -20,10 +20,10 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-10 px-4 py-2",
+        default: "h-11 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
+        sm: "h-11 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
+        lg: "h-12 rounded-md px-8",
-        icon: "h-10 w-10",
+        icon: "h-11 w-11",
       },
     },
     defaultVariants: {

client/src/pages/ai.tsx

@@ -25,7 +25,7 @@ export default function AI() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-8 max-w-5xl mx-auto">
+        <div className="p-4 sm:p-6 lg:p-8 max-w-5xl mx-auto">
           <div className="mb-8">
             <h1 className="text-3xl font-bold text-foreground">Assistant IA</h1>
             <p className="text-muted-foreground mt-2">

client/src/pages/calendar.tsx

@@ -25,7 +25,7 @@ export default function Calendar() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-8 max-w-[1600px] mx-auto">
+        <div className="p-4 sm:p-6 lg:p-8 max-w-[1600px] mx-auto">
           <div className="mb-8">
             <h1 className="text-3xl font-bold text-foreground">Calendrier</h1>
             <p className="text-muted-foreground mt-2">

client/src/pages/dashboard.tsx

@@ -27,7 +27,7 @@ export default function Dashboard() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-8 space-y-8 max-w-[1600px] mx-auto">
+        <div className="p-4 sm:p-6 lg:p-8 space-y-6 sm:space-y-8 max-w-[1600px] mx-auto">
           <StatsCards />
           
           <RecentPublications />

client/src/pages/history.tsx

@@ -37,7 +37,7 @@ export default function History() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-8 max-w-5xl mx-auto">
+        <div className="p-4 sm:p-6 lg:p-8 max-w-5xl mx-auto">
           <div className="mb-8">
             <h1 className="text-3xl font-bold text-foreground">Historique</h1>
             <p className="text-muted-foreground mt-2">

client/src/pages/media.tsx

@@ -25,7 +25,7 @@ export default function Media() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-8 max-w-[1600px] mx-auto">
+        <div className="p-4 sm:p-6 lg:p-8 max-w-[1600px] mx-auto">
           <div className="mb-8">
             <h1 className="text-3xl font-bold text-foreground">Médiathèque</h1>
             <p className="text-muted-foreground mt-2">

client/src/pages/new-post.tsx

@@ -208,7 +208,7 @@ export default function NewPost() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-8 max-w-6xl mx-auto">
+        <div className="p-4 sm:p-6 lg:p-8 max-w-6xl mx-auto">
           <div className="mb-8">
             <h1 className="text-3xl font-bold text-foreground">Nouvelle publication</h1>
             <p className="text-muted-foreground mt-2">
@@ -216,7 +216,7 @@ export default function NewPost() {
             </p>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
             <div className="space-y-8">
               <Card className="rounded-2xl border-border/50 shadow-lg">
                 <CardHeader className="p-6">

client/src/pages/pages.tsx

@@ -61,7 +61,7 @@ export default function PagesManagement() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-8 max-w-[1600px] mx-auto">
+        <div className="p-4 sm:p-6 lg:p-8 max-w-[1600px] mx-auto">
           <div className="flex justify-between items-center mb-8">
             <div>
               <h1 className="text-3xl font-bold text-foreground">Pages gérées</h1>

client/src/pages/settings.tsx

@@ -138,7 +138,7 @@ export default function Settings() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-8 max-w-4xl mx-auto">
+        <div className="p-4 sm:p-6 lg:p-8 max-w-4xl mx-auto">
           <div className="mb-8">
             <h1 className="text-3xl font-bold text-foreground">Paramètres</h1>
             <p className="text-muted-foreground mt-2">

client/src/pages/sql.tsx

@@ -93,7 +93,7 @@ export default function SqlAdmin() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-8 max-w-[1600px] mx-auto space-y-8">
+        <div className="p-4 sm:p-6 lg:p-8 max-w-[1600px] mx-auto space-y-6 sm:space-y-8">
           <div>
             <h1 className="text-3xl font-bold flex items-center gap-2">
               <Database className="w-8 h-8" />
@@ -104,7 +104,7 @@ export default function SqlAdmin() {
             </p>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
+          <div className="grid grid-cols-1 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
             {/* Liste des tables */}
             <Card className="rounded-2xl border-border/50 shadow-lg">
               <CardHeader className="p-6">

client/src/pages/users-admin.tsx

@@ -296,7 +296,7 @@ export default function UsersAdmin() {
       <main className="flex-1 overflow-y-auto">
         <TopBar onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
         
-        <div className="p-8 max-w-[1600px] mx-auto space-y-8">
+        <div className="p-4 sm:p-6 lg:p-8 max-w-[1600px] mx-auto space-y-6 sm:space-y-8">
           <div>
             <h1 className="text-3xl font-bold flex items-center gap-2">
               <Users className="w-8 h-8" />
@@ -307,7 +307,7 @@ export default function UsersAdmin() {
             </p>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
             {/* Liste des utilisateurs */}
             <div className="lg:col-span-2">
               <Card className="rounded-2xl border-border/50 shadow-lg">