ui-components: fix Input styles for Firefox

Firefox handled differently <input/> width so spinner group was moved out of container's borders. Applying 'overflow': auto attribute fixes this problem @firefox-only mixin allows to apply styles for Firefox browser only.
cockroachdb · May 22, 2020 · 8fb592a · 8fb592a
1 parent 111aa7a
commit 8fb592a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/packages/ui-components/src/Input/number-input.scss b/packages/ui-components/src/Input/number-input.scss
@@ -12,6 +12,10 @@
 // remove default arrow spinner for input -- Firefox browser
 .input[type=number] {
   -moz-appearance: textfield;
+  @include firefox-only {
+    width: -moz-available;
+    overflow-x: auto
+  }
 }
 
 // Following block describes styles for "Up" and "Down" buttons
@@ -25,6 +29,7 @@
     position: relative;
     right: 0;
     width: 32px;
+    min-width: 32px;
   }
 
   .spin-button {

diff --git a/packages/ui-components/src/styles/tokens.scss b/packages/ui-components/src/styles/tokens.scss
@@ -122,6 +122,16 @@ $crl-base-divider: $crl-neutral-5;
   }
 }
 
+@mixin firefox-only {
+  @at-root {
+    @-moz-document url-prefix() {
+      & {
+        @content;
+      }
+    }
+  }
+}
+
 /**
  Variables
 */