Use content box sizing instead of negative margins

diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index 55d492b29421968cad2e0b3585aebdcdd2c0e23a..82efab506c80f4d7dbd27f465f04928d383664f9 100644 (file)
--- 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);
 
         .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);
         .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 ee551aed2a3ed0daed281cde7b6fa8e5c4b93c36..321b0bcb9af1dd17fa091ca51e1f8dbf397991b7 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -415,6 +415,9 @@ body.small-nav {
     height: 3.5rem;
 
     > .btn {
     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 {
       --bs-btn-border-color: var(--bs-body-bg);
     }
     > .btn:hover {