diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx
index f6993e7161a77..a235f5a59128a 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx
@@ -96,7 +96,7 @@ export const TextInputStyles = css`
   line-height: 20px;
   padding: 6px 6px 6px 12px;
   margin: 0;
-  transition: box-shadow linear 150ms;
+  transition: box-shadow 150ms;
 
   ::placeholder {
     color: ${Colors.textLighter()};
@@ -118,7 +118,7 @@ export const TextInputStyles = css`
     box-shadow:
       ${Colors.borderDefault()} inset 0px 0px 0px 1px,
       ${Colors.keylineDefault()} inset 2px 2px 1.5px,
-      ${Colors.focusRing()} 0 0 0 3px;
+      ${Colors.focusRing()} 0 0 0 2px;
     outline: none;
   }
 `;
@@ -141,17 +141,17 @@ const StyledInput = styled.input<StyledInputProps>`
         `
       : null}
 
-  box-shadow: ${({$strokeColor}) => $strokeColor || Colors.borderDefault()} 0px 0px 0px 1px;
+  box-shadow: ${({$strokeColor}) => $strokeColor || Colors.borderDefault()} inset 0px 0px 0px 1px;
   padding: ${({$hasIcon}) => ($hasIcon ? '6px 6px 6px 28px' : '6px 6px 6px 12px')};
 
   :hover {
-    box-shadow: ${({$strokeColor}) => $strokeColor || Colors.borderHover()} 0px 0px 0px 1px;
+    box-shadow: ${({$strokeColor}) => $strokeColor || Colors.borderHover()} inset 0px 0px 0px 1px;
   }
 
   :focus {
     box-shadow:
-      ${({$strokeColor}) => $strokeColor || Colors.borderDefault()} 0px 0px 0px 1px,
-      ${Colors.focusRing()} 0 0 0 3px;
+      ${({$strokeColor}) => $strokeColor || Colors.borderHover()} inset 0px 0px 0px 1px,
+      ${Colors.focusRing()} 0 0 0 2px;
     background-color: ${Colors.backgroundDefaultHover()};
   }
 `;
@@ -164,17 +164,16 @@ interface TextAreaProps {
 export const TextArea = styled.textarea<TextAreaProps>`
   ${TextInputStyles}
 
-  box-shadow: ${Colors.borderDefault()} inset 0px 0px 0px 1px;
+  box-shadow: ${({$strokeColor}) => $strokeColor || Colors.borderDefault()} inset 0px 0px 0px 1px;
 
   :hover {
-    box-shadow: ${Colors.borderHover()} inset 0px 0px 0px 1px;
+    box-shadow: ${({$strokeColor}) => $strokeColor || Colors.borderHover()} inset 0px 0px 0px 1px;
   }
 
-  :hover {
-    box-shadow: ${Colors.borderHover()} inset 0px 0px 0px 1px;
-  }
   :focus {
-    box-shadow: ${Colors.focusRing()} 0px 0px 0px 1px;
+    box-shadow:
+      ${({$strokeColor}) => $strokeColor || Colors.borderHover()} inset 0px 0px 0px 1px,
+      ${Colors.focusRing()} 0px 0px 0px 2px;
     background-color: ${Colors.backgroundDefaultHover()};
   }
 
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/TextInput.stories.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/TextInput.stories.tsx
index 02c34d412e63f..d357ce28dfd53 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/TextInput.stories.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/TextInput.stories.tsx
@@ -1,6 +1,8 @@
 import {Meta} from '@storybook/react';
 import {useState} from 'react';
 
+import {Box} from '../Box';
+import {Button} from '../Button';
 import {Colors} from '../Color';
 import {Icon} from '../Icon';
 import {TextInput} from '../TextInput';
@@ -59,3 +61,19 @@ export const RightElement = () => {
     />
   );
 };
+
+export const NextToButton = () => {
+  const [value, setValue] = useState('');
+  return (
+    <Box flex={{direction: 'row', gap: 8, alignItems: 'center'}}>
+      <TextInput
+        icon="layers"
+        placeholder="Type anything…"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        rightElement={<Icon name="info" color={Colors.accentPrimary()} />}
+      />
+      <Button>Hello</Button>
+    </Box>
+  );
+};