Fix button misalignment on Firefox

Avoids relying on defaults that don't apply on FireFox

diff --git a/index.html b/index.html
index e90bc1d56d6bf511cbaff16a63627061e0cb8b3f..68a8b6c66511cf77ec2953bba3990f6d3780153a 100644 (file)
--- a/index.html
+++ b/index.html
@@ -72,9 +72,10 @@
       gap: 8px;
     }
 
-    .label-container {
+    .label-container,
+    .button-container {
       display: flex;
-      gap: 4px;
+      align-items: center;
     }
 
     label {
@@ -82,10 +83,10 @@
     }
 
     button {
+      line-height: 0;
       background: none;
       border: none;
       padding: 8px;
-      margin: -8px;
       cursor: pointer;
       transition: filter 400ms;
       color: hsl(216deg 50% 40%);
@@ -98,7 +99,7 @@
     }
 
     button>svg {
-      block-size: 100%;
+      inline-size: 20px;
       pointer-events: none;
     }
 
@@ -128,9 +129,7 @@
     .button-container {
       visibility: hidden;
       opacity: 0;
-      display: flex;
       justify-content: center;
-      gap: 16px;
       transition: opacity 300ms;
     }