Fix overflow

Arize-ai · Feb 24, 2022 · 2c6e02b · 2c6e02b
1 parent 6c32db1
commit 2c6e02b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git 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
@@ -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,
   },