chore: fix UI

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

@@ -14,6 +14,7 @@ import {
     TouchableOpacity,
     Modal,
     StatusBar,
+    useWindowDimensions,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { spacing, fontSize, borderRadius } from "../../theme";
@@ -34,10 +35,10 @@ import TomTomMap, {
     TomTomMarker,
 } from "../../components/TomTomMap";
 
-const MAP_HEIGHT = 280;
-
 export default function DeliveryScreen() {
     const { colors } = useTheme();
+    const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+    const MAP_HEIGHT = screenHeight < 700 ? 200 : screenWidth < 380 ? 220 : 280;
     const statusColors = getStatusColors(colors);
     const [livreurs, setLivreurs] = useState<DeliveryPerson[]>([]);
     const [stats, setStats] = useState({
@@ -185,8 +186,8 @@ export default function DeliveryScreen() {
 
                 summaryRow: {
                     flexDirection: "row",
-                    padding: spacing.l,
-                    gap: spacing.s,
+                    padding: screenWidth < 380 ? spacing.m : spacing.l,
+                    gap: screenWidth < 380 ? spacing.xs : spacing.s,
                 },
                 summaryCard: {
                     flex: 1,
@@ -197,13 +198,14 @@ export default function DeliveryScreen() {
                     alignItems: "center",
                 },
                 summaryValue: {
-                    fontSize: fontSize.xl,
+                    fontSize: screenWidth < 380 ? fontSize.lg : fontSize.xl,
                     fontWeight: "bold",
                     color: colors.textWhite,
                 },
                 summaryLabel: {
-                    fontSize: fontSize.xs,
+                    fontSize: screenWidth < 380 ? 10 : fontSize.xs,
                     color: colors.textMuted,
+                    textAlign: "center",
                 },
 
                 mapContainer: {
@@ -311,7 +313,8 @@ export default function DeliveryScreen() {
                 },
                 statsRow: {
                     flexDirection: "row",
-                    gap: spacing.l,
+                    flexWrap: "wrap",
+                    gap: screenWidth < 380 ? spacing.s : spacing.l,
                     marginTop: spacing.s,
                 },
                 stat: {
@@ -425,8 +428,9 @@ export default function DeliveryScreen() {
                 },
                 legendRow: {
                     flexDirection: "row",
+                    flexWrap: "wrap",
                     justifyContent: "center",
-                    gap: spacing.l,
+                    gap: screenWidth < 380 ? spacing.m : spacing.l,
                 },
                 legendItem: {
                     flexDirection: "row",
@@ -436,7 +440,7 @@ export default function DeliveryScreen() {
                 legendDot: { width: 10, height: 10, borderRadius: 5 },
                 legendText: { color: colors.white, fontSize: fontSize.sm },
             }),
-        [colors],
+        [colors, screenWidth, screenHeight, MAP_HEIGHT],
     );
 
     // --------------------------------------------------