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

ohcnetwork · Mar 29, 2024 · 6f882a3 · 6f882a3
1 parent cd23b66
commit 6f882a3
Showing 1 changed file with 30 additions and 26 deletions.
diff --git a/src/Components/Facility/PatientNotesSlideover.tsx b/src/Components/Facility/PatientNotesSlideover.tsx
@@ -199,32 +199,36 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
             disableEdit={!patientActive}
           />
           <div className="relative mx-4 flex items-center">
-            <AutoExpandingTextInputFormField
-              id="doctor_notes_textarea"
-              maxHeight={160}
-              rows={1}
-              name="note"
-              value={noteField}
-              onChange={(e) => setNoteField(e.value)}
-              className="grow"
-              errorClassName="hidden"
-              placeholder="Type your Note"
-              disabled={!patientActive}
-              onFocus={() => setFocused(true)}
-              onBlur={() => setFocused(false)}
-            />
-            <ButtonV2
-              id="add_doctor_note_button"
-              onClick={onAddNote}
-              border={false}
-              className="absolute right-2"
-              ghost
-              size="small"
-              disabled={!patientActive}
-              authorizeFor={NonReadOnlyUsers}
-            >
-              <CareIcon className="care-l-message text-lg" />
-            </ButtonV2>
+            <div className=" w-full px-12">
+              <AutoExpandingTextInputFormField
+                id="doctor_notes_textarea"
+                maxHeight={160}
+                rows={1}
+                name="note"
+                value={noteField}
+                onChange={(e) => setNoteField(e.value)}
+                className="grow"
+                errorClassName="hidden"
+                placeholder="Type your Note"
+                disabled={!patientActive}
+                onFocus={() => setFocused(true)}
+                onBlur={() => setFocused(false)}
+              />
+            </div>
+            <div className="flex items-center">
+              <ButtonV2
+                id="add_doctor_note_button"
+                onClick={onAddNote}
+                border={false}
+                className="absolute right-2"
+                ghost
+                size="small"
+                disabled={!patientActive}
+                authorizeFor={NonReadOnlyUsers}
+              >
+                <CareIcon className="care-l-message text-lg" />
+              </ButtonV2>
+            </div>
           </div>
         </div>
       )}