fix(ui-text-input,ui-flex): fix focus ring causing scrollbars to appear

The cause was that we were using CSS borders whole scale changes, this causes the component's size
to change if there is no padding

INSTUI-4523

Author: matyasf

packages/ui-flex/src/Flex/README.md

@@ -279,25 +279,28 @@ type: example
 ### Handling overflow
 
 When `direction` is set to `column`, Flex.Items' `overflowY` property is automagically set
-to `auto` to account for content overflow with a vertical scrollbar.
+to `auto` to account for content overflow with a vertical scrollbar. Add padding, so focus rings are not cut off.
 
 > To override this default, simply set `overflowY` on the Flex.Item to either `visible` or `hidden`.
 
 ```js
 ---
 type: example
 ---
-<Flex
-  withVisualDebug
-  direction="column"
->
-  <Flex.Item padding="small">
-    <Heading>Pandas are cute, right?</Heading>
-  </Flex.Item>
-  <Flex.Item size="150px" padding="small">
-    <Img src={avatarSquare} />
-  </Flex.Item>
-</Flex>
+  <Flex
+    withVisualDebug
+    direction="column"
+  >
+    <Flex.Item padding="small">
+      <Heading>Pandas are cute, right?</Heading>
+    </Flex.Item>
+    <Flex.Item>
+      <TextInput name="name" renderLabel="If you dont add padding, the focus ring will be cut off!" />
+    </Flex.Item>
+    <Flex.Item size="150px" padding="small">
+      <Img src={avatarSquare} />
+    </Flex.Item>
+  </Flex>
 ```
 
 ### A few common layouts

packages/ui-text-input/src/TextInput/styles.ts

@@ -81,11 +81,11 @@ const generateStyle = (
   const focusedStyle = focused
     ? {
         opacity: 1,
-        transform: 'scale(1)'
+        outlineOffset: '0.15rem'
       }
     : {
         opacity: 0,
-        transform: 'scale(0.95)'
+        outlineOffset: '-0.9rem'
       }
 
   const invalidStyle = invalid
@@ -176,13 +176,13 @@ const generateStyle = (
         position: 'absolute',
         display: 'block',
         boxSizing: 'border-box',
-        top: '-0.25rem',
-        bottom: '-0.25rem',
-        left: '-0.25rem',
-        right: '-0.25rem',
-        border: `${componentTheme.focusOutlineWidth} ${componentTheme.focusOutlineStyle} ${componentTheme.focusOutlineColor}`,
-        borderRadius: `calc(${componentTheme.borderRadius} * 1.5)`,
-        transition: 'all 0.2s',
+        top: '0',
+        bottom: '0',
+        left: '0',
+        right: '0',
+        outline: `${componentTheme.focusOutlineWidth} ${componentTheme.focusOutlineStyle} ${componentTheme.focusOutlineColor}`,
+        borderRadius: componentTheme.borderRadius,
+        transition: 'opacity 0.2s, outline-offset 0.2s ease-out',
 
         ...focusedStyle, // properties to transition on :focus
         ...invalidAndFocusedStyle