2 files changed, 39 insertions, 15 deletions

diff --git a/main.js b/main.js
index 08e8405..eccca7a 100644
--- a/main.js
+++ b/main.js
@@ -3918,14 +3918,25 @@ const infoMetadataAccordions = [];
   modal.appendChild(content);
   content.classList.add('modal-content');
 
-  const body = document.createElement('div');
-  content.appendChild(body);
-  body.classList.add('modal-body');
+  const header = document.createElement('div');
+  content.appendChild(header);
+  header.classList.add('modal-header');
 
   const title = document.createElement('div');
   title.classList.add('h5');
   title.innerHTML = 'Mät i kartan';
-  body.appendChild(title);
+  header.appendChild(title);
+
+  const btn_close = document.createElement('button');
+  btn_close.classList.add('btn-close');
+  btn_close.type = 'button';
+  btn_close.title = 'Stäng';
+  btn_close.setAttribute('aria-label', btn_close.title);
+  header.appendChild(btn_close);
+
+  const body = document.createElement('div');
+  content.appendChild(body);
+  body.classList.add('modal-body');
 
   const getMeasureMode = (function() {
     const btn_group = document.createElement('div');
@@ -3987,16 +3998,22 @@ const infoMetadataAccordions = [];
     btn_group.appendChild(buttons.ok);
   })();
 
-  document.getElementById('measure-button')
-    .getElementsByTagName('button')[0]
-    .addEventListener('click', function(event) {
-      if (event.currentTarget.getAttribute('aria-expanded') === 'true') {
-        disposePopover();
-        setup(getMeasureMode());
-      } else {
-        setup(null);
+  const button_menu = document.getElementById('measure-button')
+    .getElementsByTagName('button')[0];
+  button_menu.addEventListener('click', function(event) {
+    if (event.currentTarget.getAttribute('aria-expanded') === 'true') {
+      disposePopover();
+      setup(getMeasureMode());
+    } else {
+      setup(null);
+      /* XXX workaround for https://github.com/twbs/bootstrap/issues/41005#issuecomment-2585390544 */
+      const activeElement = document.activeElement;
+      if (activeElement.isEqualNode(btn_close)) {
+          activeElement.blur();
       }
-    });
+    }
+  });
+  btn_close.onclick = () => button_menu.click();
 })();
 
 /* popup and feature overlays */
diff --git a/style.css b/style.css
index da48ebb..748f615 100644
--- a/style.css
+++ b/style.css
@@ -494,9 +494,16 @@ body.inprogress {
   -moz-user-select: text;
   user-select: text; /* eslint-disable-line css/use-baseline */
 }
-#measure-panel .h5 {
+#measure-panel .modal-header {
+  border-bottom: none;
+  padding: var(--bs-modal-padding);
+}
+#measure-panel .modal-header .h5 {
   font-size: 1.25rem;
-  margin-bottom: .75rem;
+  margin: 0;
+}
+#measure-panel .modal-body {
+  padding-top: 0;
 }
 #age-filter-modal .btn-group > .btn-check:not(:checked) + label.btn:hover,
 #measure-panel .btn-group > .btn-check:not(:checked) + label.btn:hover {