fixes overflow text, z-index and reply functionality breaking in Notes

[shauryag2002]

Proposed Changes

• Fixes Overflow text, z-index and reply functionality breaking in Notes section. #8662
• Fixed the overflow issue caused by long single words in the notes section.
• Corrected z-index problems where elements in the single chat header (such as "created at") were overlapping improperly.
• Fixed the UI breaking issue when long text or replies are entered into the notes section, ensuring proper word wrapping and container behavior.
• Ensured that the "Edit History" popup handles large text inputs without breaking the UI.

Video of changes:

Notes_chat_fix.mp4

UI Improvements:

• src/Components/Facility/ConsultationDoctorNotes/index.tsx: Added z-10 class to the top div to ensure it appears above other elements.
• src/Components/Facility/DoctorNoteReplyPreviewCard.tsx: Added a useEffect hook to scroll to the bottom of the notes when a new note is added.
• src/Components/Facility/DoctorNoteReplyPreviewCard.tsx: Limited the height of the note display area and added overflow auto for better readability.
• src/Components/Facility/PatientNoteCard.tsx: Ensured the note field breaks words and added autoFocus to the text area when editing. [1] [2]

Functional Enhancements:

• src/Components/Facility/PatientNoteCard.tsx: Integrated useKeyboardShortcut to allow closing the edit mode with the Escape key.
• src/Components/Facility/PatientNoteCard.tsx: Added visual keyboard shortcut hint for the Escape key.

Consistency Updates:

• src/Components/Facility/ConsultationDoctorNotes/index.tsx: Updated button styling to include focus states for better accessibility.
• src/Components/Patient/PatientNotes.tsx: Applied similar changes as in ConsultationDoctorNotes to maintain consistency across components. [1] [2]

@ohcnetwork/care-fe-code-reviewers

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Update product documentation.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews
• Completion of QA

[netlify]

✅ Deploy Preview for care-ohc ready!

Name	Link
🔨 Latest commit	e1f2414
🔍 Latest deploy log	https://app.netlify.com/sites/care-ohc/deploys/66f98bed682548000884849f
😎 Deploy Preview	https://deploy-preview-8663--care-ohc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[rithviknishad]

Closing as mentioned in: #8662 (comment)