adjusted design

src/routePlanner/index.tsx

@@ -15,6 +15,9 @@ export const RoutePlanner = () => {
 
     return (
         <section class="route-planner">
+            <section class="header">
+                <h2>Route builder</h2>
+            </section>
             <section class="markers">
                 <MarkersComponent
                     onMarkersReorder={reorderMarkers}

src/routePlanner/markers.tsx

@@ -34,18 +34,15 @@ export const MarkersComponent = ({
     }, [listContainerRef, markers, onMarkersReorder]);
 
     return (
-        <>
+        <ol ref={listContainerRef}>
-            <h3>Markers</h3>
+            {markers.map((marker, i) => (
-            <ol ref={listContainerRef}>
+                <MarkerComponent
-                {markers.map((marker, i) => (
+                    key={marker.key}
-                    <MarkerComponent
+                    marker={marker}
-                        key={marker.key}
+                    isFirst={i === 0}
-                        marker={marker}
+                    isLast={i === markers.length - 1}
-                        isFirst={i === 0}
+                />
-                        isLast={i === markers.length - 1}
+            ))}
-                    />
+        </ol>
-                ))}
-            </ol>
-        </>
     );
 };

src/routePlanner/style.css

@@ -4,12 +4,17 @@ section.route-planner {
 	column-gap: 1rem;
 	row-gap: 1rem;
 	grid-template-columns: 1fr 2fr;
-	grid-template-rows: 1fr min-content;
+	grid-template-rows: min-content 1fr min-content;
 	grid-template-areas:
+		"header map"
 		"markers map"
 		"export map";
 }
 
+section.route-planner > section.header {
+	grid-area: header;
+}
+
 section.route-planner > section.markers {
 	grid-area: markers;
 }
@@ -83,6 +88,7 @@ section.route-planner .map-container .leaflet-tooltip-pane .text {
 		grid-template-columns: 1fr;
 		grid-template-rows: 1fr min-content 2fr;
 		grid-template-areas:
+			"header"
 			"markers"
 			"export"
 			"map";