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,8 +34,6 @@ export const MarkersComponent = ({
     }, [listContainerRef, markers, onMarkersReorder]);
 
     return (
-        <>
-            <h3>Markers</h3>
         <ol ref={listContainerRef}>
             {markers.map((marker, i) => (
                 <MarkerComponent
@@ -46,6 +44,5 @@ export const MarkersComponent = ({
                 />
             ))}
         </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";