From 2c6e02b9f18171ac6f4457baa4d498729082dccb Mon Sep 17 00:00:00 2001
From: Mikel King <mikeldking@gmail.com>
Date: Tue, 22 Feb 2022 15:25:54 -0700
Subject: [PATCH] Fix overflow

---
 src/textfield/TextFieldBase.tsx | 1 +
 src/theme.ts                    | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/textfield/TextFieldBase.tsx b/src/textfield/TextFieldBase.tsx
index a8ca6500..fe76f2d4 100644
--- a/src/textfield/TextFieldBase.tsx
+++ b/src/textfield/TextFieldBase.tsx
@@ -174,6 +174,7 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
         border-radius: ${theme.borderRadius.medium}px;
         background-color: ${theme.components.textField.backgroundColor};
         transition: all 0.2s ease-in-out;
+        overflow: hidden;
         &.is-hovered {
           border: 1px solid ${theme.components.textField.hoverBorderColor};
           background-color: ${theme.components.textField.activeBackgroundColor};
diff --git a/src/theme.ts b/src/theme.ts
index eea88d8c..665d6e53 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -83,14 +83,14 @@ const theme = {
       borderColor: borderColors.lightGrayBorder,
       hoverBorderColor: borderColors.lightGrayHoverBorder,
       activeBorderColor: arizeColors.arizeLightBlue,
-      activeBackgroundColor: darken(0.05, grayColors.gray500),
+      activeBackgroundColor: darken(0.02, grayColors.gray500),
     },
     textField: {
       borderColor: borderColors.lightGrayBorder,
       hoverBorderColor: borderColors.lightGrayHoverBorder,
       activeBorderColor: arizeColors.arizeLightBlue,
       backgroundColor: grayColors.gray500,
-      activeBackgroundColor: darken(0.05, grayColors.gray500),
+      activeBackgroundColor: darken(0.02, grayColors.gray500),
     },
     button: {
       primaryBorderColor: '#5BAECC',
@@ -172,7 +172,7 @@ const theme = {
   /**
    * The height of a single line of form input etc.
    */
-  singleLineHeight: 38,
+  singleLineHeight: 36,
   borderRadius: {
     medium: 4,
   },