From 387de38b48b47af5875750bc949c299fa5dc39b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= <emilio@crisal.io>
Date: Sun, 29 Mar 2020 05:16:32 +0200
Subject: [PATCH] Fix overflowing inputs on some platforms.

`width: 100%` sets the content-box width, unless the box-sizing value is
`border-box`, see:

  https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

(`box-sizing: border-box` is already the default for `<select>`).

In platforms with more padding by default on inputs (like Firefox on Linux for
example) this can cause the inputs to overflow the popup. Also shrink the
padding manually to what the popup layout expects, so that it doesn't grow past
the popup.

Additionally we remove the appearance from checkboxes so that they don't take up
space.

This fixes https://bugzilla.mozilla.org/show_bug.cgi?id=1625716.
---
 pages/styles.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/pages/styles.css b/pages/styles.css
index a68d9bb..003c32e 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -86,11 +86,19 @@ footer a.button {
 
 input[type=url], select {
   width: 100%;
+  box-sizing: border-box;
   margin-bottom: 5px;
 }
 
+input[type=url] {
+  padding: 1px 2px;
+}
+
 input[type=checkbox] {
   opacity: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
 }
 
 .checkbox-label {