chore: fix UI

frontend-admin/src/screens/delivery/DashboardScreen.tsx

@@ -14,12 +14,12 @@ import {
     RefreshControl,
     TouchableOpacity,
     AppState,
-    Dimensions,
     Linking,
     Modal,
     StatusBar,
     ScrollView,
     TextInput,
+    useWindowDimensions,
 } from "react-native";
 import Geolocation from "@react-native-community/geolocation";
 import { Ionicons } from "@expo/vector-icons";
@@ -55,8 +55,6 @@ import TomTomMap, {
 } from "../../components/TomTomMap";
 import DetailsModal from "../../components/ui/Modal";
 
-const { width: SCREEN_WIDTH } = Dimensions.get("window");
-const MAP_HEIGHT = 260;
 const LOCATION_INTERVAL_MS = 15000;
 
 const STATUS_LABELS: Record<string, string> = {
@@ -79,6 +77,8 @@ interface EnrichedDelivery extends DeliveryItem {
 
 export default function DashboardScreen() {
     const { colors } = useTheme();
+    const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+    const MAP_HEIGHT = screenHeight < 700 ? 180 : screenWidth < 380 ? 200 : 260;
     const [status, setStatus] = useState<DeliveryStatus | null>(null);
     const [deliveries, setDeliveries] = useState<EnrichedDelivery[]>([]);
     const [queue, setQueue] = useState<QueueInfo | null>(null);
@@ -1067,17 +1067,19 @@ export default function DashboardScreen() {
                     gap: spacing.m,
                 },
                 instructionIconBox: {
-                    width: 42,
-                    height: 42,
-                    borderRadius: 12,
+                    width: screenWidth < 380 ? 34 : 42,
+                    height: screenWidth < 380 ? 34 : 42,
+                    borderRadius: 10,
                     backgroundColor: colors.accent,
                     justifyContent: "center",
                     alignItems: "center",
+                    flexShrink: 0,
                 },
                 instructionText: {
                     color: colors.textWhite,
-                    fontSize: fontSize.md,
+                    fontSize: screenWidth < 380 ? fontSize.sm : fontSize.md,
                     fontWeight: "600",
+                    flex: 1,
                 },
                 instructionStreet: {
                     color: colors.textMuted,
@@ -1259,7 +1261,7 @@ export default function DashboardScreen() {
                 address: {
                     flex: 1,
                     color: colors.textSecondary,
-                    fontSize: fontSize.sm,
+                    fontSize: screenWidth < 380 ? fontSize.xs : fontSize.sm,
                 },
 
                 itemsSection: {
@@ -1285,10 +1287,12 @@ export default function DashboardScreen() {
                     paddingVertical: spacing.xs,
                     borderBottomWidth: 1,
                     borderBottomColor: colors.borderSubtle,
+                    flexWrap: "nowrap",
                 },
                 itemName: {
+                    flex: 1,
                     color: colors.textWhite,
-                    fontSize: fontSize.sm,
+                    fontSize: screenWidth < 380 ? fontSize.xs : fontSize.sm,
                     fontWeight: "600",
                 },
                 itemQty: {
@@ -1547,7 +1551,7 @@ export default function DashboardScreen() {
                     fontSize: fontSize.md,
                 },
             }),
-        [colors],
+        [colors, screenWidth, screenHeight, MAP_HEIGHT],
     );
 
     if (loading) return <LoadingSpinner message="Chargement..." />;