From 55ddcfc9a728aadfb8836a9b616bc733d6bada09 Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Fri, 25 Sep 2020 23:58:48 -0400
Subject: [PATCH] SizeInput: fix slider bug that broke functionality on mobile

We were, for some reason, preventing the default behavior of touch
events onTouchStart and onTouchEnd. This made the slider unusable with
drag actions on mobile. I can't remember why we did this to begin with,
probably something important...

The slider thumb size was also increased for better tap target size.
---
 src/components/SizeInput/SizeInput.css | 28 ++++++++++++++++----------
 src/components/SizeInput/SizeInput.tsx |  2 --
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/SizeInput/SizeInput.css b/src/components/SizeInput/SizeInput.css
index 454155c..e700cbb 100644
--- a/src/components/SizeInput/SizeInput.css
+++ b/src/components/SizeInput/SizeInput.css
@@ -12,6 +12,10 @@
   font-size: 16px;
 }
 
+.size-bar label {
+  width: 40px;
+}
+
 .size-bar:focus-within {
   outline: none;
 }
@@ -36,9 +40,9 @@
 .size-bar input::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
   appearance: none;
-  width: 14px; /* Set a specific slider handle width */
-  height: 14px; /* Slider handle height */
-  padding: 6px;
+  width: 16px; /* Set a specific slider handle width */
+  height: 16px; /* Slider handle height */
+  margin: 6px;
   border-radius: 50%;
   background: white; /* Green background */
   cursor: pointer; /* Cursor on hover */
@@ -46,24 +50,26 @@
 }
 
 .size-bar input::-moz-range-thumb {
-  width: 14px; /* Set a specific slider handle width */
-  height: 14px; /* Slider handle height */
-  padding: 6px;
-  background: black; /* Green background */
+  appearance: none;
+  width: 16px; /* Set a specific slider handle width */
+  height: 16px; /* Slider handle height */
+  margin: 6px;
+  border-radius: 50%;
+  background: white; /* Green background */
   cursor: pointer; /* Cursor on hover */
   transition: height 0.1s, width 0.1s;
 }
 
 .size-bar input:focus::-moz-range-thumb {
   outline: none;
-  width: 20px; /* Set a specific slider handle width */
-  height: 20px; /* Slider handle height */
+  width: 24px; /* Set a specific slider handle width */
+  height: 24px; /* Slider handle height */
   box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);
 }
 
 .size-bar input:focus::-webkit-slider-thumb {
   outline: none;
-  width: 20px; /* Set a specific slider handle width */
-  height: 20px; /* Slider handle height */
+  width: 24px; /* Set a specific slider handle width */
+  height: 24px; /* Slider handle height */
   box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);
 }
diff --git a/src/components/SizeInput/SizeInput.tsx b/src/components/SizeInput/SizeInput.tsx
index ff28cb2..1c9e0c3 100644
--- a/src/components/SizeInput/SizeInput.tsx
+++ b/src/components/SizeInput/SizeInput.tsx
@@ -7,12 +7,10 @@ import "./SizeInput.css";
 type SizeInputProps = {};
 
 const handleFocus = (event: React.UIEvent<HTMLInputElement>) => {
-  event.preventDefault();
   event.currentTarget.focus();
 };
 
 const handleBlur = (event: React.UIEvent<HTMLInputElement>) => {
-  event.preventDefault();
   event.currentTarget.blur();
 };