From 96ac0fb728e205871b2a4ca6d2d9b7d82a4fd2db Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Mon, 12 Aug 2024 03:21:21 +0300
Subject: [PATCH] Use content box sizing instead of negative margins

---
 app/assets/javascripts/leaflet.layers.js | 2 +-
 app/assets/stylesheets/common.scss       | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index 55d492b29..82efab506 100644
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -22,7 +22,7 @@ L.OSM.layers = function (options) {
         .prop("checked", map.hasLayer(layer))
         .appendTo(buttonContainer);
 
-      var item = $("<label class='btn btn-outline-primary border-4 rounded-3 bg-transparent position-absolute top-0 start-0 bottom-0 end-0 m-n1 overflow-hidden'>")
+      var item = $("<label class='btn btn-outline-primary border-4 rounded-3 bg-transparent position-absolute p-0 h-100 w-100 overflow-hidden'>")
         .prop("for", id)
         .append($("<span class='badge position-absolute top-0 start-0 rounded-top-0 rounded-start-0 py-1 px-2 bg-body bg-opacity-75 text-body text-wrap text-start fs-6 lh-base'>").append(layer.options.name))
         .appendTo(buttonContainer);
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index ee551aed2..321b0bcb9 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -415,6 +415,9 @@ body.small-nav {
     height: 3.5rem;
 
     > .btn {
+      box-sizing: content-box;
+      top: - map.get($border-widths, 4);
+      left: - map.get($border-widths, 4);
       --bs-btn-border-color: var(--bs-body-bg);
     }
     > .btn:hover {
-- 
2.39.5