From 5b7d2a622ea5441ae750ea4d3e5cf56ee5737ac5 Mon Sep 17 00:00:00 2001
From: Samuel Mannehed <samuel@cendio.se>
Date: Mon, 2 Jan 2023 14:46:33 +0100
Subject: Fix positioning of checkbox checkmark

Changing the ::after element to be displayed as 'block' lets it be
positioned using relative. This means we can remove the confusing
"position: relative" from the checkbox.
---
 app/styles/input.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/styles/input.css b/app/styles/input.css
index c5897ab..eaf083c 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -86,13 +86,13 @@ option {
  * Checkboxes
  */
 input[type=checkbox] {
-  position: relative;
   background-color: white;
   background-image: unset;
   border: 1px solid dimgrey;
   border-radius: 3px;
   width: 13px;
   height: 13px;
+  padding: 0;
   margin-right: 6px;
   vertical-align: bottom;
   transition: 0.2s background-color linear;
@@ -103,7 +103,8 @@ input[type=checkbox]:checked {
 }
 input[type=checkbox]:checked::after {
   content: "";
-  position: absolute;
+  display: block; /* width & height doesn't work on inline elements */
+  position: relative;
   top: 0;
   left: 3px;
   width: 3px;
-- 
cgit v1.2.1