._.

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,50 +59,56 @@ 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},
-                  Координаты:{" "}
-                  {coord
-                    ? `${coord.latitude}, ${coord.longitude}`
-                    : "Не найдены"}
-                  )
+                <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 && (
-            <MapContainer
-              center={[coordinates[0].latitude, coordinates[0].longitude]}
-              zoom={5}
-              style={{ height: "400px", width: "100%" }}
-            >
-              <TileLayer
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-              />
-              {coordinates.map((coord, index) => (
-                <Marker
-                  key={index}
-                  position={[coord.latitude, coord.longitude]}
-                >
-                  <Popup>{coord.city}</Popup>
-                </Marker>
-              ))}
-              {route.length > 0 && <Polyline positions={route} color="blue" />}
-            </MapContainer>
+            <div className="map-container">
+              <MapContainer
+                center={[coordinates[0].latitude, coordinates[0].longitude]}
+                zoom={5}
+                style={{ height: "400px", width: "100%" }}
+              >
+                <TileLayer
+                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                  attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                />
+                {coordinates.map((coord, index) => (
+                  <Marker
+                    key={index}
+                    position={[coord.latitude, coord.longitude]}
+                  >
+                    <Popup>{coord.city}</Popup>
+                  </Marker>
+                ))}
+                {route.length > 0 && (
+                  <Polyline positions={route} color="blue" />
+                )}
+              </MapContainer>
+            </div>
           )}
         </div>
       )}