._.

src/pages/DeliveryOrderDetails.css

@@ -0,0 +1,35 @@
+.delivery-order-details {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+}
+
+.content-container {
+    max-width: 800px;
+    width: 100%;
+    text-align: left;
+}
+
+.city-list {
+    list-style-type: decimal;
+    padding: 0;
+    margin-bottom: 20px;
+}
+
+.city-item {
+    margin: 10px 0;
+    font-size: 16px;
+}
+
+.city-info {
+    display: block;
+    font-size: 14px;
+    color: #555;
+}
+
+.map-container {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+}

src/pages/DeliveryOrderDetails.jsx

@@ -10,6 +10,7 @@ import {
   Polyline,
 } from "react-leaflet";
 import polyline from "@mapbox/polyline";
+import "./DeliveryOrderDetails.css";
 
 const DeliveryOrderDetails = () => {
   const { id: deliveryOrderId } = useParams();
@@ -58,31 +59,34 @@ const DeliveryOrderDetails = () => {
   };
 
   return (
-    <div>
+    <div className="delivery-order-details">
       {loading ? (
         <div className="spinner-border" role="status">
-          <span className="visually-hidden">Загрузка доставок...</span>
+          <span className="visually-hidden">Загрузка...</span>
         </div>
       ) : (
-        <div>
-          <ul>
+        <div className="content-container">
+          <ol className="city-list">
             {deliveryAccessories.map((accessory) => {
               const coord = coordinates.find(
                 (c) => c.city === accessory.city_name
               );
               return (
-                <li key={accessory.id}>
-                  Доставка: {accessory.name} (Город: {accessory.city_name},
-                  Координаты:{" "}
+                <li key={accessory.id} className="city-item">
+                  <strong>Доставка:</strong> {accessory.name}
+                  <span className="city-info">
+                    (Город: {accessory.city_name}, Координаты:{" "}
                     {coord
                       ? `${coord.latitude}, ${coord.longitude}`
                       : "Не найдены"}
                     )
+                  </span>
                 </li>
               );
             })}
-          </ul>
+          </ol>
           {coordinates.length > 0 && (
+            <div className="map-container">
               <MapContainer
                 center={[coordinates[0].latitude, coordinates[0].longitude]}
                 zoom={5}
@@ -100,8 +104,11 @@ const DeliveryOrderDetails = () => {
                     <Popup>{coord.city}</Popup>
                   </Marker>
                 ))}
-              {route.length > 0 && <Polyline positions={route} color="blue" />}
+                {route.length > 0 && (
+                  <Polyline positions={route} color="blue" />
+                )}
               </MapContainer>
+            </div>
           )}
         </div>
       )}