From 600d4e92e5fa4c1ed61f14b9e16df2fda2074370 Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Wed, 13 Mar 2024 19:52:51 -0700
Subject: [PATCH] Fix button misalignment on Firefox

Avoids relying on defaults that don't apply on FireFox
---
 index.html | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index e90bc1d..68a8b6c 100644
--- 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;
     }
 
-- 
2.47.3