[GEN-1796]: fix padding for text-area

frontend/webapp/hooks/destinations/useDestinationFormData.ts

@@ -87,6 +87,7 @@ export function useDestinationFormData(params?: { destinationType?: string; supp
   }, [supportedSignals]);
 
   function handleFormChange(key: keyof typeof INITIAL | string, val: any) {
+    // this is for a case where "exportedSignals" have been changed, it's an object so they children are targeted as: "exportedSignals.logs"
     const [parentKey, childKey] = key.split('.');
 
     if (!!childKey) {

frontend/webapp/reuseable-components/textarea/index.tsx

@@ -61,7 +61,7 @@ const StyledTextArea = styled.textarea`
   background: none;
   color: ${({ theme }) => theme.colors.text};
   font-size: 14px;
-  padding: 12px 20px;
+  padding: 12px 20px 0;
   font-family: ${({ theme }) => theme.font_family.primary};
   font-weight: 300;
   line-height: 22px;
@@ -96,20 +96,25 @@ const ErrorMessage = styled(Text)`
 const TextArea: React.FC<TextAreaProps> = ({ errorMessage, title, tooltip, required, onChange, ...props }) => {
   const ref = useRef<HTMLTextAreaElement>(null);
 
+  const resize = () => {
+    // this is to auto-resize the textarea according to the number of rows typed
+    if (ref.current) {
+      ref.current.style.height = 'auto';
+      ref.current.style.height = `${ref.current.scrollHeight}px`;
+    }
+  };
+
   return (
     <Container>
       <FieldLabel title={title} required={required} tooltip={tooltip} />
 
       <InputWrapper $disabled={props.disabled} $hasError={!!errorMessage} $isActive={!!props.autoFocus}>
         <StyledTextArea
           ref={ref}
+          onFocus={resize}
+          onBlur={resize}
           onChange={(e) => {
-            if (ref.current) {
-              // The following auto-resizes the textarea to the number of rows typed
-              ref.current.style.height = 'auto';
-              ref.current.style.height = `${ref.current.scrollHeight}px`;
-            }
-
+            resize();
             onChange?.(e);
           }}
           {...props}