Pierre/MAD-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added optimizations for mobile

Browse Source
This commit is contained in:
Pierre
2026-02-08 15:27:44 +01:00
parent f1e9e3f8d4
commit da2e32d004
28 changed files with 1667 additions and 1075 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/NewConversationModal.tsx
View File

@@ -113,16 +113,16 @@ export default function NewConversationModal({
};
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div className="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
<div className="p-6 border-b border-gray-200">
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-0 md:p-4">
<div className="bg-white rounded-none md:rounded-lg shadow-xl w-full h-full md:h-auto md:max-w-md md:mx-4 md:max-h-[90vh] flex flex-col">
<div className="p-4 md:p-6 border-b border-gray-200 flex-shrink-0">
<div className="flex items-center justify-between">
<h2 className="text-xl font-semibold text-gray-900">Nouvelle conversation</h2>
<h2 className="text-lg md:text-xl font-semibold text-gray-900">Nouvelle conversation</h2>
<button
onClick={onClose}
className="text-gray-400 hover:text-gray-600 transition-colors"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-5 h-5 md:w-6 md:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
@@ -134,7 +134,7 @@ export default function NewConversationModal({
</div>
</div>
<div className="p-6 space-y-4">
<div className="flex-1 overflow-y-auto p-4 md:p-6 space-y-4">
{/* Type de conversation */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
@@ -198,36 +198,36 @@ export default function NewConversationModal({
</div>
{/* Liste des utilisateurs */}
<div className="max-h-64 overflow-y-auto border border-gray-200 rounded-lg">
<div className="max-h-48 md:max-h-64 overflow-y-auto border border-gray-200 rounded-lg">
{error && (
<div className="p-4 text-sm text-red-600">
<div className="p-3 md:p-4 text-sm text-red-600">
Erreur lors du chargement des utilisateurs
</div>
)}
{!users && !error && (
<div className="p-4 text-sm text-gray-500 text-center">Chargement...</div>
<div className="p-3 md:p-4 text-sm text-gray-500 text-center">Chargement...</div>
)}
{availableUsers.length === 0 && users && (
<div className="p-4 text-sm text-gray-500 text-center">Aucun utilisateur trouvé</div>
<div className="p-3 md:p-4 text-sm text-gray-500 text-center">Aucun utilisateur trouvé</div>
)}
{availableUsers.length > 0 && (
<div className="divide-y divide-gray-100">
{availableUsers.map((user) => (
<label
key={user.id}
className="flex items-center gap-3 p-3 hover:bg-gray-50 cursor-pointer"
className="flex items-center gap-2 md:gap-3 p-2 md:p-3 hover:bg-gray-50 cursor-pointer"
>
<input
type="checkbox"
checked={selectedUsers.includes(user.id)}
onChange={() => handleUserToggle(user.id)}
className="rounded border-gray-300 text-lblue focus:ring-lblue"
className="rounded border-gray-300 text-lblue focus:ring-lblue w-4 h-4 md:w-auto md:h-auto"
/>
<div className="flex-1">
<div className="text-sm font-medium text-gray-900">
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-gray-900 truncate">
{user.name || 'Utilisateur'}
</div>
<div className="text-xs text-gray-500">{user.email}</div>
<div className="text-xs text-gray-500 truncate">{user.email}</div>
</div>
</label>
))}
@@ -245,17 +245,17 @@ export default function NewConversationModal({
)}
</div>
<div className="p-6 border-t border-gray-200 flex justify-end gap-3">
<div className="p-4 md:p-6 border-t border-gray-200 flex flex-col-reverse md:flex-row justify-end gap-2 md:gap-3 flex-shrink-0">
<button
onClick={onClose}
className="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
className="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors w-full md:w-auto"
>
Annuler
</button>
<button
onClick={handleCreate}
disabled={isCreating || selectedUsers.length === 0}
className="px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors disabled:opacity-50 disabled:cursor-not-allowed w-full md:w-auto"
>
{isCreating ? 'Création...' : 'Créer'}
</button>