fix(TextInputMapper): improve styles inside form

Author: tenphi

.changeset/chilly-crews-mix.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Improve TextInputMapper styles inside Form.'

src/components/fields/TextInputMapper/TextInputMapper.tsx

@@ -9,6 +9,7 @@ import {
 
 import { useEvent } from '../../../_internal/hooks';
 import { FieldBaseProps } from '../../../shared';
+import { mergeProps } from '../../../utils/react/index';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { CloseIcon, PlusIcon } from '../../../icons';
 import { Button } from '../../actions';
@@ -34,6 +35,19 @@ export interface CubeTextInputMapperProps extends FieldBaseProps {
   valueProps?: Partial<CubeTextInputMapperInputProps>;
 }
 
+// Rewrites upper level field component styles
+// @TODO: Remove this after the release of new Element API
+const PROPS_GRID_HACK = {
+  styles: {
+    InputArea: {
+      gridColumn: {
+        '': 'auto',
+        'has-sider': 'auto',
+      },
+    },
+  },
+};
+
 // remove duplicates in mappings
 function removeDuplicates(mappings: Mapping[]) {
   const keys = new Set<string>();
@@ -254,7 +268,7 @@ function TextInputMapperInput(props: CubeTextInputMapperInputProps) {
     <TextInput
       qa="AddMapping"
       width="auto"
-      {...rest}
+      {...mergeProps(rest, PROPS_GRID_HACK)}
       id={undefined}
       value={value}
       labelPosition="top"