diff --git a/index.css b/index.css
index ca01b962..3491ddc3 100644
--- a/index.css
+++ b/index.css
@@ -1297,20 +1297,22 @@ div.states>input.riverType {
 }
 
 #diplomacySelect {
-	position: absolute;
+	width: 5em;
+	margin: .1em 0 0 -.3em;
+	position: fixed;
 	background-color: #ffffff;
 	border: 1px solid #1891ff;
-	width: 23%;
-	left: 70.5%;
 }
 
 #diplomacySelect > div {
 	width: 100%;
+	padding-left: .3em;
 }
 
 #diplomacySelect > div:hover {
 	background-color: #1891ff;
 	color: #ffffff;
+	width: calc(100% - .3em);
 }
 
 #burgsFooterPopulation {
diff --git a/modules/save-and-load.js b/modules/save-and-load.js
index 25c7b81b..b17f9ba8 100644
--- a/modules/save-and-load.js
+++ b/modules/save-and-load.js
@@ -234,15 +234,13 @@ function getMapData() {
     const biomes = [biomesData.color, biomesData.habitability, biomesData.name].join("|");
     const notesData = JSON.stringify(notes);
 
-    // set transform values to default
-    svg.attr("width", graphWidth).attr("height", graphHeight);
-    const transform = d3.zoomTransform(svg.node());
-    viewbox.attr("transform", null);
-    const svg_xml = (new XMLSerializer()).serializeToString(svg.node());
+    const cloneEl = document.getElementById("map").cloneNode(true); // clone svg
 
-    // restore initial values
-    svg.attr("width", svgWidth).attr("height", svgHeight);
-    zoom.transform(svg, transform);
+    // set transform values to default
+    cloneEl.setAttribute("width", graphWidth);
+    cloneEl.setAttribute("height", graphHeight);
+    cloneEl.querySelector("#viewbox").setAttribute("transform", null);
+    const svg_xml = (new XMLSerializer()).serializeToString(cloneEl);
 
     const gridGeneral = JSON.stringify({spacing:grid.spacing, cellsX:grid.cellsX, cellsY:grid.cellsY, boundary:grid.boundary, points:grid.points, features:grid.features});
     const features = JSON.stringify(pack.features);
diff --git a/modules/ui/diplomacy-editor.js b/modules/ui/diplomacy-editor.js
index f4264c3f..63f2ffce 100644
--- a/modules/ui/diplomacy-editor.js
+++ b/modules/ui/diplomacy-editor.js
@@ -52,11 +52,7 @@ function editDiplomacy() {
     const selectedLine = body.querySelector("div.Self");
     const sel = selectedLine ? +selectedLine.dataset.id : states.find(s => s.i && !s.removed).i;
     const selName = states[sel].fullName;
-
-    // move select drop-down back to initial place
-    const select = document.getElementById("diplomacySelect");
-    body.parentNode.insertBefore(select, body);
-    select.style.display = "none";
+    diplomacySelect.style.display = "none";
 
     let lines = `<div class="states Self" data-id=${sel}>
       <div data-tip="List below shows relations to ${selName}" style="width: 100%">${selName}</div>
@@ -164,18 +160,18 @@ function editDiplomacy() {
     const select = document.getElementById("diplomacySelect");
     const show = select.style.display === "none";
     if (!show) {select.style.display = "none"; return;}
-    event.target.parentNode.insertBefore(select, event.target);
     select.style.display = "block";
+    const input = event.target.closest("div").querySelector("input");
+    select.style.left = input.getBoundingClientRect().left + "px";
+    select.style.top = input.getBoundingClientRect().bottom + "px";
+    body.dataset.state = event.target.closest("div.states").dataset.id;
   }
 
   function diplomacyChangeRelations(event) {
     event.stopPropagation();
-    const select = document.getElementById("diplomacySelect");
-    select.style.display = "none";
-
-    const subject = +event.target.parentElement.parentElement.dataset.id;
+    diplomacySelect.style.display = "none";
+    const subject = body.dataset.state;
     const rel = event.target.innerHTML;
-    body.parentNode.insertBefore(select, body);
 
     const states = pack.states, chronicle = states[0].diplomacy;
     const selectedLine = body.querySelector("div.Self");