chore: fix UI

frontend-admin/src/screens/admin/OrderDetailScreen.tsx

@@ -598,6 +598,34 @@ export default function OrderDetailScreen() {
                 <Text style={styles.date}>
                     {new Date(command.created_at).toLocaleString("fr-FR")}
                 </Text>
+                {command.status === "cancelled" && command.cancel_reason ? (
+                    <View style={{
+                        marginTop: spacing.m,
+                        padding: spacing.m,
+                        backgroundColor: colors.danger + "18",
+                        borderRadius: borderRadius.sm,
+                        borderLeftWidth: 3,
+                        borderLeftColor: colors.danger,
+                    }}>
+                        <Text style={{ color: colors.danger, fontSize: fontSize.xs, fontWeight: "700", marginBottom: 4, textTransform: "uppercase", letterSpacing: 0.5 }}>
+                            Motif d'annulation
+                        </Text>
+                        <Text style={{ color: colors.textSecondary, fontSize: fontSize.sm }}>
+                            {command.cancel_reason}
+                        </Text>
+                    </View>
+                ) : command.status === "cancelled" ? (
+                    <View style={{
+                        marginTop: spacing.m,
+                        padding: spacing.m,
+                        backgroundColor: colors.bgSecondary,
+                        borderRadius: borderRadius.sm,
+                    }}>
+                        <Text style={{ color: colors.textMuted, fontSize: fontSize.sm, fontStyle: "italic" }}>
+                            Aucun motif fourni
+                        </Text>
+                    </View>
+                ) : null}
             </Card>
 
             {/* Livreur tracking map */}

frontend-admin/src/screens/auth/AdminLoginScreen.tsx

@@ -4,7 +4,7 @@ import {
     Text,
     StyleSheet,
     KeyboardAvoidingView,
-    Platform,
+    ScrollView,
     TouchableOpacity,
     TextInput as RNTextInput,
     Animated,
@@ -158,8 +158,13 @@ export default function AdminLoginScreen() {
     return (
         <KeyboardAvoidingView
             style={styles.container}
-            behavior={Platform.OS === "ios" ? "padding" : undefined}
+            behavior="height"
         >
+            <ScrollView
+                contentContainerStyle={{ flexGrow: 1 }}
+                keyboardShouldPersistTaps="handled"
+                showsVerticalScrollIndicator={false}
+            >
             {/* Decorative top accent */}
             <View style={[styles.accentBar, { backgroundColor: ACCENT }]} />
             <View style={styles.heroSection}>
@@ -297,6 +302,7 @@ export default function AdminLoginScreen() {
                 message={alert.message}
                 onClose={hideAlert}
             />
+            </ScrollView>
         </KeyboardAvoidingView>
     );
 }

frontend-admin/src/screens/auth/CabineLoginScreen.tsx

@@ -4,7 +4,7 @@ import {
     Text,
     StyleSheet,
     KeyboardAvoidingView,
-    Platform,
+    ScrollView,
     TouchableOpacity,
     TextInput as RNTextInput,
     Animated,
@@ -158,8 +158,13 @@ export default function CabineLoginScreen() {
     return (
         <KeyboardAvoidingView
             style={styles.container}
-            behavior={Platform.OS === "ios" ? "padding" : undefined}
+            behavior="height"
         >
+            <ScrollView
+                contentContainerStyle={{ flexGrow: 1 }}
+                keyboardShouldPersistTaps="handled"
+                showsVerticalScrollIndicator={false}
+            >
             <View style={[styles.accentBar, { backgroundColor: ACCENT }]} />
             <View style={styles.heroSection}>
                 <View
@@ -288,6 +293,7 @@ export default function CabineLoginScreen() {
                 message={alert.message}
                 onClose={hideAlert}
             />
+            </ScrollView>
         </KeyboardAvoidingView>
     );
 }

frontend-admin/src/screens/auth/DeliveryLoginScreen.tsx

@@ -4,7 +4,7 @@ import {
     Text,
     StyleSheet,
     KeyboardAvoidingView,
-    Platform,
+    ScrollView,
     TouchableOpacity,
     TextInput as RNTextInput,
     Animated,
@@ -158,8 +158,13 @@ export default function DeliveryLoginScreen() {
     return (
         <KeyboardAvoidingView
             style={styles.container}
-            behavior={Platform.OS === "ios" ? "padding" : undefined}
+            behavior="height"
         >
+            <ScrollView
+                contentContainerStyle={{ flexGrow: 1 }}
+                keyboardShouldPersistTaps="handled"
+                showsVerticalScrollIndicator={false}
+            >
             <View style={[styles.accentBar, { backgroundColor: ACCENT }]} />
             <View style={styles.heroSection}>
                 <View
@@ -288,6 +293,7 @@ export default function DeliveryLoginScreen() {
                 message={alert.message}
                 onClose={hideAlert}
             />
+            </ScrollView>
         </KeyboardAvoidingView>
     );
 }

mobile/src/screens/auth/ChangePasswordScreen.tsx

@@ -7,6 +7,8 @@ import {
     StyleSheet,
     Alert,
     ActivityIndicator,
+    KeyboardAvoidingView,
+    ScrollView,
 } from "react-native";
 import { Feather } from "@expo/vector-icons";
 import { useAuth } from "../../auth/AuthContext";
@@ -56,7 +58,15 @@ export default function ChangePasswordScreen() {
     };
 
     return (
-        <View style={[styles.container, { backgroundColor: colors.bgPrimary }]}>
+        <KeyboardAvoidingView
+            style={[styles.container, { backgroundColor: colors.bgPrimary }]}
+            behavior="height"
+        >
+        <ScrollView
+            contentContainerStyle={styles.scrollContent}
+            keyboardShouldPersistTaps="handled"
+            showsVerticalScrollIndicator={false}
+        >
             <View style={styles.iconWrapper}>
                 <Feather name="lock" size={48} color="#7c3aed" />
             </View>
@@ -130,13 +140,17 @@ export default function ChangePasswordScreen() {
                     <Text style={styles.buttonText}>Confirmer</Text>
                 )}
             </TouchableOpacity>
-        </View>
+        </ScrollView>
+        </KeyboardAvoidingView>
     );
 }
 
 const styles = StyleSheet.create({
     container: {
         flex: 1,
+    },
+    scrollContent: {
+        flexGrow: 1,
         padding: 24,
         justifyContent: "center",
     },

mobile/src/screens/auth/ClientLoginScreen.tsx

@@ -6,6 +6,8 @@ import {
     TouchableOpacity,
     ActivityIndicator,
     StyleSheet,
+    KeyboardAvoidingView,
+    ScrollView,
 } from "react-native";
 import { Feather, FontAwesome } from "@expo/vector-icons";
 import { loginUser } from "../../api/api";
@@ -84,9 +86,15 @@ const LoginClient = () => {
     };
 
     return (
-        <View
+        <KeyboardAvoidingView
             style={[styles.container, { backgroundColor: colors.bgSecondary }]}
+            behavior="height"
         >
+            <ScrollView
+                contentContainerStyle={styles.scrollContent}
+                keyboardShouldPersistTaps="handled"
+                showsVerticalScrollIndicator={false}
+            >
             <View style={[styles.card, { backgroundColor: colors.bgPrimary }]}>
                 <View style={styles.header}>
                     <FontAwesome name="user-circle" size={48} color="#7c3aed" />
@@ -213,7 +221,8 @@ const LoginClient = () => {
                     )}
                 </TouchableOpacity>
             </View>
-        </View>
+            </ScrollView>
+        </KeyboardAvoidingView>
     );
 };
 
@@ -222,6 +231,9 @@ export default LoginClient;
 const styles = StyleSheet.create({
     container: {
         flex: 1,
+    },
+    scrollContent: {
+        flexGrow: 1,
         justifyContent: "center",
         alignItems: "center",
         padding: 16,