Form field improvements

source/css/atoms/form-field.pcss

@@ -5,6 +5,11 @@
 .text-input {
   @apply outline-none bg-grey-25 py-3 px-4 text-lg border border-grey-200 transition duration-200;
 
+  /* Fix FF text-input not adjusting it's width.
+   * See: https://stackoverflow.com/a/48326796/303184
+   */
+  @apply min-w-0;
+
   &:hover:not([disabled]):not([readonly]) {
     @apply border-grey-300;
   }
@@ -74,6 +79,11 @@
 .select__control {
   @apply w-full appearance-none outline-none bg-grey-25 py-3 pl-4 pr-8 text-lg rounded-none border border-grey-200 transition duration-200;
 
+  /* Fix FF input not adjusting it's width.
+   * See: https://stackoverflow.com/a/48326796/303184
+   */
+  @apply min-w-0;
+
   &:hover:not([disabled]):not([readonly]) {
     @apply border-grey-300;
   }
@@ -104,7 +114,7 @@
   @apply relative flex;
 
   input {
-    @apply w-5 h-5 cursor-pointer appearance-none outline-none bg-grey-200 mr-2 border border-grey-200 transition duration-200;
+    @apply w-5 h-5 mr-2 flex-shrink-0 cursor-pointer appearance-none outline-none bg-grey-200 border border-grey-200 transition duration-200;
 
     &:hover:not([disabled]):not([readonly]) {
       @apply border-grey-300;
@@ -148,7 +158,7 @@
   @apply relative;
 
   input {
-    @apply w-5 h-5 appearance-none cursor-pointer outline-none bg-grey-200 mr-2 border border-grey-200 transition duration-200 rounded-full;
+    @apply w-5 h-5 mr-2 flex-shrink-0 appearance-none cursor-pointer outline-none bg-grey-200 border border-grey-200 transition duration-200 rounded-full;
 
     &:hover:not([disabled]):not([readonly]) {
       @apply border-grey-300;
@@ -173,14 +183,13 @@
   }
 
   &:after {
-    @apply inline absolute pointer-events-none rounded-full bg-white;
-
-    width: .7rem;
-    height: .7rem;
+    @apply w-2 h-2 inline absolute pointer-events-none bg-white;
 
     content: "";
-    top: calc((theme("spacing.5") - .7rem) / 2);
-    left: calc((theme("spacing.5") - .7rem) / 2);
+    /* Somehow, standard Tailwind `rounded-full` ends up not creating a perfect circle */
+    border-radius: 50%;
+    top: calc((theme("spacing.5") - theme("spacing.2")) / 2);
+    left: calc((theme("spacing.5") - theme("spacing.2")) / 2);
   }
 }