fix(admin): make all modals scrollable and responsive on mobile

RechargeModal (BillingPage), create-org modal (ClientsManagementView),
and create-template modal (TemplatesPage) now use the bottom-sheet
pattern: fixed header + scrollable body + fixed footer, max-h-[90vh],
and items-end on mobile so they slide up from the bottom.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/admin/src/pages/BillingPage.tsx

@@ -13,37 +13,61 @@ const CREDIT_PACKS = [
 const SUPPORT_WA_URL = 'https://wa.me/221700000000?text=Bonjour%2C%20je%20souhaite%20recharger%20mes%20cr%C3%A9dits%20IA%20Xaml%C3%A9%20Studio.';
 
 function RechargeModal({ onClose }: { onClose: () => void }) {
+    useEffect(() => {
+        document.body.style.overflow = 'hidden';
+        const onKey = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
+        window.addEventListener('keydown', onKey);
+        return () => {
+            document.body.style.overflow = '';
+            window.removeEventListener('keydown', onKey);
+        };
+    }, [onClose]);
+
     return (
-        <div className="fixed inset-0 bg-black/40 backdrop-blur-sm z-50 flex items-center justify-center p-4" onClick={onClose}>
-            <div className="bg-white rounded-2xl shadow-xl max-w-md w-full p-6" onClick={e => e.stopPropagation()}>
-                <div className="flex items-center justify-between mb-5">
+        <div
+            className="fixed inset-0 bg-black/40 backdrop-blur-sm z-50 flex items-end sm:items-center justify-center sm:p-4"
+            onClick={onClose}
+        >
+            <div
+                className="bg-white w-full sm:max-w-md rounded-t-3xl sm:rounded-2xl shadow-2xl flex flex-col max-h-[90vh]"
+                onClick={e => e.stopPropagation()}
+            >
+                {/* Header — fixe */}
+                <div className="flex items-center justify-between px-6 py-5 border-b border-slate-100 shrink-0">
                     <h2 className="text-lg font-bold text-slate-900">Recharger les crédits IA</h2>
-                    <button onClick={onClose} className="text-slate-400 hover:text-slate-600 transition-colors">
+                    <button
+                        onClick={onClose}
+                        className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-slate-100 text-slate-400 hover:text-slate-600 transition-colors"
+                    >
                         <X className="w-5 h-5" />
                     </button>
                 </div>
 
-                <div className="space-y-3 mb-6">
+                {/* Contenu scrollable */}
+                <div className="overflow-y-auto flex-1 px-6 py-5 space-y-3">
                     {CREDIT_PACKS.map(pack => (
                         <a
                             key={pack.credits}
                             href={`${SUPPORT_WA_URL}%20-%20Pack%20${pack.label}`}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="flex items-center justify-between p-4 border border-slate-200 rounded-xl hover:border-indigo-400 hover:bg-indigo-50 transition-all group cursor-pointer"
+                            className="flex items-center justify-between p-4 border border-slate-200 rounded-xl hover:border-indigo-400 hover:bg-indigo-50 active:bg-indigo-100 transition-all group"
                         >
                             <div>
                                 <p className="font-semibold text-slate-800 group-hover:text-indigo-700">{pack.label}</p>
                                 <p className="text-xs text-slate-400">Pack recharge unique</p>
                             </div>
-                            <span className="text-indigo-600 font-bold">{pack.price}</span>
+                            <span className="text-indigo-600 font-bold shrink-0 ml-4">{pack.price}</span>
                         </a>
                     ))}
                 </div>
 
-                <p className="text-xs text-slate-400 text-center">
-                    En cliquant sur un pack, vous serez redirigé vers WhatsApp pour finaliser votre commande avec notre équipe.
-                </p>
+                {/* Footer — fixe */}
+                <div className="px-6 py-4 border-t border-slate-100 shrink-0">
+                    <p className="text-xs text-slate-400 text-center">
+                        En cliquant sur un pack, vous serez redirigé vers WhatsApp pour finaliser votre commande avec notre équipe.
+                    </p>
+                </div>
             </div>
         </div>
     );

apps/admin/src/pages/ClientsManagementView.tsx

@@ -296,117 +296,124 @@ export default function ClientsManagementView() {
 
             {/* Modal de création d'organisation */}
             {isModalOpen && (
-                <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-md flex items-center justify-center p-4 z-50">
-                    <div className="bg-white rounded-[2rem] shadow-2xl w-full max-w-xl p-10 animate-in zoom-in-95 duration-200">
-                        <div className="flex items-center justify-between mb-8">
+                <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-md flex items-end sm:items-center justify-center sm:p-4 z-50">
+                    <div className="bg-white rounded-t-[2rem] sm:rounded-[2rem] shadow-2xl w-full sm:max-w-xl flex flex-col max-h-[90vh] animate-in zoom-in-95 duration-200">
+                        {/* Fixed header */}
+                        <div className="shrink-0 flex items-center justify-between px-8 pt-8 pb-5 border-b border-slate-100">
                             <h2 className="text-2xl font-black text-slate-900">Nouvelle Organisation</h2>
                             <button onClick={() => { setIsModalOpen(false); setCreateErrors({}); }} className="p-2 hover:bg-slate-100 rounded-full transition">
                                 <X className="w-5 h-5 text-slate-400" />
                             </button>
                         </div>
-                        <form onSubmit={handleCreateOrg} className="space-y-6">
-                            <div className="grid grid-cols-2 gap-4">
-                                <div className="col-span-2">
-                                    <label className="block text-xs font-bold uppercase text-slate-400 mb-2">Nom de l'entreprise <span className="text-red-400">*</span></label>
-                                    <input
-                                        type="text"
-                                        placeholder="Ex: AgroBusiness Senegal"
-                                        value={newOrg.name}
-                                        onChange={e => { setNewOrg({...newOrg, name: e.target.value}); setCreateErrors(p => ({...p, name: ''})); }}
-                                        className={`w-full border rounded-xl px-4 py-3 outline-none focus:ring-2 transition ${createErrors.name ? 'border-red-400 focus:ring-red-200' : 'border-slate-200 focus:ring-slate-900'}`}
-                                    />
-                                    {createErrors.name && <p className="text-xs text-red-500 mt-1">{createErrors.name}</p>}
-                                </div>
-                                <div>
-                                    <label className="block text-xs font-bold uppercase text-slate-400 mb-2">Slug (URL) <span className="text-red-400">*</span></label>
-                                    <input
-                                        type="text"
-                                        placeholder="agro-sn"
-                                        value={newOrg.slug}
-                                        onChange={e => { setNewOrg({...newOrg, slug: e.target.value.toLowerCase().replace(/\s+/g, '-')}); setCreateErrors(p => ({...p, slug: ''})); }}
-                                        className={`w-full border rounded-xl px-4 py-3 outline-none focus:ring-2 transition font-mono text-sm ${createErrors.slug ? 'border-red-400 focus:ring-red-200' : 'border-slate-200 focus:ring-slate-900'}`}
-                                    />
-                                    {createErrors.slug && <p className="text-xs text-red-500 mt-1">{createErrors.slug}</p>}
-                                </div>
-                                <div>
-                                    <label className="block text-xs font-bold uppercase text-slate-400 mb-2">Cas d'usage</label>
-                                    <select 
-                                        value={newOrg.mode}
-                                        onChange={e => setNewOrg({...newOrg, mode: e.target.value as any})}
-                                        className="w-full border border-slate-200 rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-slate-900 transition bg-white"
-                                    >
-                                        <option value="CRM_MARKETING">CRM & Marketing</option>
-                                        <option value="PEDAGOGY">Pédagogie & Formation</option>
-                                        <option value="CUSTOMER_SERVICE">Service Client IA</option>
-                                    </select>
-                                </div>
-                                <div className="col-span-2">
-                                    <label className="block text-xs font-bold uppercase text-slate-400 mb-2">Espace de travail (Workstream)</label>
-                                    <select 
-                                        value={newOrg.useCase}
-                                        onChange={e => {
-                                            const val = e.target.value as any;
-                                            setNewOrg({
-                                                ...newOrg, 
-                                                useCase: val,
-                                                // Sync mode for convenience if they pick CRM
-                                                mode: val === 'CRM_WHATSAPP' ? 'CRM_MARKETING' : 'PEDAGOGY'
-                                            });
-                                        }}
-                                        className="w-full border border-slate-200 rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-slate-900 transition bg-white"
-                                    >
-                                        <option value="EDUCATION">🎓 Plateforme Éducative (Modules)</option>
-                                        <option value="CRM_WHATSAPP">💬 CRM & Messages WhatsApp (Excel)</option>
-                                    </select>
-                                </div>
-                            </div>
 
-                            <div className="p-6 bg-slate-50 rounded-2xl border border-slate-100 space-y-4">
-                                <h4 className="text-xs font-bold text-slate-500 uppercase tracking-widest">Administrateur Principal</h4>
+                        {/* Scrollable body */}
+                        <form onSubmit={handleCreateOrg} className="flex flex-col flex-1 min-h-0">
+                            <div className="overflow-y-auto flex-1 px-8 py-6 space-y-6">
                                 <div className="grid grid-cols-2 gap-4">
-                                    <div>
-                                        <label className="block text-xs font-bold text-slate-500 mb-1">Nom complet <span className="text-red-400">*</span></label>
+                                    <div className="col-span-2">
+                                        <label className="block text-xs font-bold uppercase text-slate-400 mb-2">Nom de l'entreprise <span className="text-red-400">*</span></label>
                                         <input
                                             type="text"
-                                            placeholder="Jean Dupont"
-                                            value={newOrg.adminName}
-                                            onChange={e => { setNewOrg({...newOrg, adminName: e.target.value}); setCreateErrors(p => ({...p, adminName: ''})); }}
-                                            className={`w-full border rounded-xl px-4 py-2 text-sm outline-none focus:ring-2 transition ${createErrors.adminName ? 'border-red-400 focus:ring-red-200' : 'border-slate-200 focus:ring-slate-900'}`}
+                                            placeholder="Ex: AgroBusiness Senegal"
+                                            value={newOrg.name}
+                                            onChange={e => { setNewOrg({...newOrg, name: e.target.value}); setCreateErrors(p => ({...p, name: ''})); }}
+                                            className={`w-full border rounded-xl px-4 py-3 outline-none focus:ring-2 transition ${createErrors.name ? 'border-red-400 focus:ring-red-200' : 'border-slate-200 focus:ring-slate-900'}`}
                                         />
-                                        {createErrors.adminName && <p className="text-xs text-red-500 mt-1">{createErrors.adminName}</p>}
+                                        {createErrors.name && <p className="text-xs text-red-500 mt-1">{createErrors.name}</p>}
                                     </div>
                                     <div>
-                                        <label className="block text-xs font-bold text-slate-500 mb-1">Email <span className="text-red-400">*</span></label>
+                                        <label className="block text-xs font-bold uppercase text-slate-400 mb-2">Slug (URL) <span className="text-red-400">*</span></label>
                                         <input
-                                            type="email"
-                                            placeholder="admin@entreprise.com"
-                                            value={newOrg.adminEmail}
-                                            onChange={e => { setNewOrg({...newOrg, adminEmail: e.target.value}); setCreateErrors(p => ({...p, adminEmail: ''})); }}
-                                            className={`w-full border rounded-xl px-4 py-2 text-sm outline-none focus:ring-2 transition ${createErrors.adminEmail ? 'border-red-400 focus:ring-red-200' : 'border-slate-200 focus:ring-slate-900'}`}
+                                            type="text"
+                                            placeholder="agro-sn"
+                                            value={newOrg.slug}
+                                            onChange={e => { setNewOrg({...newOrg, slug: e.target.value.toLowerCase().replace(/\s+/g, '-')}); setCreateErrors(p => ({...p, slug: ''})); }}
+                                            className={`w-full border rounded-xl px-4 py-3 outline-none focus:ring-2 transition font-mono text-sm ${createErrors.slug ? 'border-red-400 focus:ring-red-200' : 'border-slate-200 focus:ring-slate-900'}`}
                                         />
-                                        {createErrors.adminEmail && <p className="text-xs text-red-500 mt-1">{createErrors.adminEmail}</p>}
+                                        {createErrors.slug && <p className="text-xs text-red-500 mt-1">{createErrors.slug}</p>}
+                                    </div>
+                                    <div>
+                                        <label className="block text-xs font-bold uppercase text-slate-400 mb-2">Cas d'usage</label>
+                                        <select
+                                            value={newOrg.mode}
+                                            onChange={e => setNewOrg({...newOrg, mode: e.target.value as any})}
+                                            className="w-full border border-slate-200 rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-slate-900 transition bg-white"
+                                        >
+                                            <option value="CRM_MARKETING">CRM & Marketing</option>
+                                            <option value="PEDAGOGY">Pédagogie & Formation</option>
+                                            <option value="CUSTOMER_SERVICE">Service Client IA</option>
+                                        </select>
                                     </div>
                                     <div className="col-span-2">
-                                        <label className="block text-xs font-bold text-slate-500 mb-1">Mot de passe provisoire <span className="text-red-400">*</span></label>
-                                        <input
-                                            type="password"
-                                            placeholder="Min. 8 caractères"
-                                            value={newOrg.password}
-                                            onChange={e => { setNewOrg({...newOrg, password: e.target.value}); setCreateErrors(p => ({...p, password: ''})); }}
-                                            className={`w-full border rounded-xl px-4 py-2 text-sm outline-none focus:ring-2 transition ${createErrors.password ? 'border-red-400 focus:ring-red-200' : 'border-slate-200 focus:ring-slate-900'}`}
-                                        />
-                                        {createErrors.password && <p className="text-xs text-red-500 mt-1">{createErrors.password}</p>}
+                                        <label className="block text-xs font-bold uppercase text-slate-400 mb-2">Espace de travail (Workstream)</label>
+                                        <select
+                                            value={newOrg.useCase}
+                                            onChange={e => {
+                                                const val = e.target.value as any;
+                                                setNewOrg({
+                                                    ...newOrg,
+                                                    useCase: val,
+                                                    mode: val === 'CRM_WHATSAPP' ? 'CRM_MARKETING' : 'PEDAGOGY'
+                                                });
+                                            }}
+                                            className="w-full border border-slate-200 rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-slate-900 transition bg-white"
+                                        >
+                                            <option value="EDUCATION">🎓 Plateforme Éducative (Modules)</option>
+                                            <option value="CRM_WHATSAPP">💬 CRM & Messages WhatsApp (Excel)</option>
+                                        </select>
+                                    </div>
+                                </div>
+
+                                <div className="p-6 bg-slate-50 rounded-2xl border border-slate-100 space-y-4">
+                                    <h4 className="text-xs font-bold text-slate-500 uppercase tracking-widest">Administrateur Principal</h4>
+                                    <div className="grid grid-cols-2 gap-4">
+                                        <div>
+                                            <label className="block text-xs font-bold text-slate-500 mb-1">Nom complet <span className="text-red-400">*</span></label>
+                                            <input
+                                                type="text"
+                                                placeholder="Jean Dupont"
+                                                value={newOrg.adminName}
+                                                onChange={e => { setNewOrg({...newOrg, adminName: e.target.value}); setCreateErrors(p => ({...p, adminName: ''})); }}
+                                                className={`w-full border rounded-xl px-4 py-2 text-sm outline-none focus:ring-2 transition ${createErrors.adminName ? 'border-red-400 focus:ring-red-200' : 'border-slate-200 focus:ring-slate-900'}`}
+                                            />
+                                            {createErrors.adminName && <p className="text-xs text-red-500 mt-1">{createErrors.adminName}</p>}
+                                        </div>
+                                        <div>
+                                            <label className="block text-xs font-bold text-slate-500 mb-1">Email <span className="text-red-400">*</span></label>
+                                            <input
+                                                type="email"
+                                                placeholder="admin@entreprise.com"
+                                                value={newOrg.adminEmail}
+                                                onChange={e => { setNewOrg({...newOrg, adminEmail: e.target.value}); setCreateErrors(p => ({...p, adminEmail: ''})); }}
+                                                className={`w-full border rounded-xl px-4 py-2 text-sm outline-none focus:ring-2 transition ${createErrors.adminEmail ? 'border-red-400 focus:ring-red-200' : 'border-slate-200 focus:ring-slate-900'}`}
+                                            />
+                                            {createErrors.adminEmail && <p className="text-xs text-red-500 mt-1">{createErrors.adminEmail}</p>}
+                                        </div>
+                                        <div className="col-span-2">
+                                            <label className="block text-xs font-bold text-slate-500 mb-1">Mot de passe provisoire <span className="text-red-400">*</span></label>
+                                            <input
+                                                type="password"
+                                                placeholder="Min. 8 caractères"
+                                                value={newOrg.password}
+                                                onChange={e => { setNewOrg({...newOrg, password: e.target.value}); setCreateErrors(p => ({...p, password: ''})); }}
+                                                className={`w-full border rounded-xl px-4 py-2 text-sm outline-none focus:ring-2 transition ${createErrors.password ? 'border-red-400 focus:ring-red-200' : 'border-slate-200 focus:ring-slate-900'}`}
+                                            />
+                                            {createErrors.password && <p className="text-xs text-red-500 mt-1">{createErrors.password}</p>}
+                                        </div>
                                     </div>
                                 </div>
                             </div>
 
-                            <button 
-                                type="submit" 
-                                disabled={isCreating}
-                                className="w-full bg-slate-900 text-white py-4 rounded-2xl font-bold hover:bg-slate-800 transition disabled:opacity-50 flex items-center justify-center gap-2 shadow-xl shadow-slate-200"
-                            >
-                                {isCreating ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Créer l\'organisation & Admin'}
-                            </button>
+                            {/* Fixed footer */}
+                            <div className="shrink-0 px-8 pb-8 pt-4 border-t border-slate-100">
+                                <button
+                                    type="submit"
+                                    disabled={isCreating}
+                                    className="w-full bg-slate-900 text-white py-4 rounded-2xl font-bold hover:bg-slate-800 transition disabled:opacity-50 flex items-center justify-center gap-2 shadow-xl shadow-slate-200"
+                                >
+                                    {isCreating ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Créer l\'organisation & Admin'}
+                                </button>
+                            </div>
                         </form>
                     </div>
                 </div>

apps/admin/src/pages/TemplatesPage.tsx

@@ -253,23 +253,27 @@ export default function TemplatesPage() {
                             onClick={() => setIsModalOpen(false)}
                             className="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
                         />
-                        <motion.div 
+                        <motion.div
                             initial={{ opacity: 0, scale: 0.9, y: 20 }}
                             animate={{ opacity: 1, scale: 1, y: 0 }}
                             exit={{ opacity: 0, scale: 0.9, y: 20 }}
-                            className="bg-white rounded-[32px] w-full max-w-xl shadow-2xl relative overflow-hidden z-10"
+                            className="bg-white rounded-[32px] w-full max-w-xl shadow-2xl relative flex flex-col max-h-[90vh] z-10"
                         >
-                            <div className="p-8">
-                                <h2 className="text-2xl font-bold text-slate-900 mb-6">
+                            {/* Fixed header */}
+                            <div className="shrink-0 px-8 pt-8 pb-6 border-b border-slate-100">
+                                <h2 className="text-2xl font-bold text-slate-900">
                                     {t('whatsapp.templates.create_modal.title')}
                                 </h2>
+                            </div>
 
-                                <form onSubmit={handleCreate} className="space-y-6">
+                            {/* Scrollable body */}
+                            <form onSubmit={handleCreate} className="flex flex-col flex-1 min-h-0">
+                                <div className="overflow-y-auto flex-1 px-8 py-6 space-y-6">
                                     <div>
                                         <label className="block text-sm font-bold text-slate-700 mb-2">
                                             {t('whatsapp.templates.create_modal.name_label')}
                                         </label>
-                                        <input 
+                                        <input
                                             required
                                             type="text"
                                             value={newTemplate.name}
@@ -284,7 +288,7 @@ export default function TemplatesPage() {
                                             <label className="block text-sm font-bold text-slate-700 mb-2">
                                                 {t('whatsapp.templates.create_modal.category_label')}
                                             </label>
-                                            <select 
+                                            <select
                                                 value={newTemplate.category}
                                                 onChange={e => setNewTemplate({...newTemplate, category: e.target.value})}
                                                 className="w-full px-5 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all font-medium"
@@ -297,7 +301,7 @@ export default function TemplatesPage() {
                                             <label className="block text-sm font-bold text-slate-700 mb-2">
                                                 {t('whatsapp.templates.create_modal.language_label')}
                                             </label>
-                                            <select 
+                                            <select
                                                 value={newTemplate.language}
                                                 onChange={e => setNewTemplate({...newTemplate, language: e.target.value})}
                                                 className="w-full px-5 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all font-medium"
@@ -314,7 +318,7 @@ export default function TemplatesPage() {
                                         <label className="block text-sm font-bold text-slate-700 mb-2">
                                             {t('whatsapp.templates.create_modal.body_label')}
                                         </label>
-                                        <textarea 
+                                        <textarea
                                             required
                                             rows={4}
                                             value={newTemplate.body}
@@ -323,24 +327,25 @@ export default function TemplatesPage() {
                                             placeholder="Hello {{1}}, welcome to our school!"
                                         />
                                     </div>
+                                </div>
 
-                                    <div className="flex gap-4 pt-4">
-                                        <button 
-                                            type="button"
-                                            onClick={() => setIsModalOpen(false)}
-                                            className="flex-1 py-4 bg-slate-50 text-slate-600 rounded-2xl font-bold hover:bg-slate-100 transition-all active:scale-95"
-                                        >
-                                            {t('common.cancel')}
-                                        </button>
-                                        <button 
-                                            type="submit"
-                                            className="flex-1 py-4 bg-indigo-600 text-white rounded-2xl font-bold hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-100 active:scale-95"
-                                        >
-                                            {t('whatsapp.templates.create_modal.submit')}
-                                        </button>
-                                    </div>
-                                </form>
-                            </div>
+                                {/* Fixed footer */}
+                                <div className="shrink-0 px-8 pb-8 pt-4 border-t border-slate-100 flex gap-4">
+                                    <button
+                                        type="button"
+                                        onClick={() => setIsModalOpen(false)}
+                                        className="flex-1 py-4 bg-slate-50 text-slate-600 rounded-2xl font-bold hover:bg-slate-100 transition-all active:scale-95"
+                                    >
+                                        {t('common.cancel')}
+                                    </button>
+                                    <button
+                                        type="submit"
+                                        className="flex-1 py-4 bg-indigo-600 text-white rounded-2xl font-bold hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-100 active:scale-95"
+                                    >
+                                        {t('whatsapp.templates.create_modal.submit')}
+                                    </button>
+                                </div>
+                            </form>
                         </motion.div>
                     </div>
                 )}