Icon overlapping with text in text-box of Doctor's Notes. #7495 (#7496)

* Icon overlapping with text in text-box of Doctor's Notes. #7495

* Update PatientNotesSlideover.tsx

* fixes #7495

---------

Co-authored-by: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
Co-authored-by: rithviknishad <mail@rithviknishad.dev>

src/Components/Facility/ConsultationDoctorNotes/index.tsx

@@ -127,7 +127,8 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
             name="note"
             value={noteField}
             onChange={(e) => setNoteField(e.value)}
-            className="grow"
+            className="w-full grow"
+            innerClassName="pr-10"
             errorClassName="hidden"
             placeholder="Type your Note"
             disabled={!patientActive}

src/Components/Facility/PatientNotesSlideover.tsx

@@ -215,8 +215,9 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
               name="note"
               value={noteField}
               onChange={(e) => setNoteField(e.value)}
-              className="grow"
+              className="w-full grow"
               errorClassName="hidden"
+              innerClassName="pr-10"
               placeholder="Type your Note"
               disabled={!patientActive}
               onFocus={() => setFocused(true)}

src/Components/Form/FormFields/AutoExpandingTextInputFormField.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import TextAreaFormField, { TextAreaFormFieldProps } from "./TextAreaFormField";
 
 type AutoExpandingTextInputFormFieldProps = TextAreaFormFieldProps & {
@@ -9,6 +9,7 @@ const AutoExpandingTextInputFormField = (
   props: AutoExpandingTextInputFormFieldProps,
 ) => {
   const myref = useRef<HTMLTextAreaElement>(null);
+
   useEffect(() => {
     if (myref.current == null) return;
     const text = myref.current.textContent?.split("\n");
@@ -24,7 +25,7 @@ const AutoExpandingTextInputFormField = (
     myref.current.style.cssText = "height:" + height + "px";
   });
 
-  return <TextAreaFormField ref={myref} {...props} className="w-full" />;
+  return <TextAreaFormField ref={myref} {...props} />;
 };
 
 export default AutoExpandingTextInputFormField;

src/Components/Form/FormFields/TextAreaFormField.tsx

@@ -1,13 +1,15 @@
 import { forwardRef } from "react";
 import FormField from "./FormField";
 import { FormFieldBaseProps, useFormFieldPropsResolver } from "./Utils";
+import { classNames } from "../../../Utils/utils";
 
 export type TextAreaFormFieldProps = FormFieldBaseProps<string> & {
   placeholder?: string;
   value?: string | number;
   rows?: number;
   // prefixIcon?: React.ReactNode;
   // suffixIcon?: React.ReactNode;
+  innerClassName?: string;
   onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
   onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
 };
@@ -30,9 +32,11 @@ const TextAreaFormField = forwardRef(
           onChange={(e) => field.handleChange(e.target.value)}
           placeholder={props.placeholder}
           rows={rows}
-          className={`cui-input-base resize-none ${
-            field.error && "border-danger-500"
-          }`}
+          className={classNames(
+            "cui-input-base resize-none",
+            field.error && "border-danger-500",
+            props.innerClassName,
+          )}
           onFocus={props.onFocus}
           onBlur={props.onBlur}
         />